*, body { margin:0; padding:0; box-sizing:border-box; }
  body { font-family:'Montserrat',sans-serif; background:#EFEEE8; color:#17355B; overflow-x:hidden; }
  .font-display { font-family:'Lora',serif; }
  .font-body { font-family:'Montserrat',sans-serif; }
  .scrollbar-hide::-webkit-scrollbar { display:none; }
  .scrollbar-hide { -ms-overflow-style:none; scrollbar-width:none; }

  @keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
  @keyframes fadeIn { from{opacity:0} to{opacity:1} }
  @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
  .anim-fadeup { animation:fadeUp .6s ease forwards; }
  .anim-fadein { animation:fadeIn .4s ease forwards; }
  .anim-delay-1 { animation-delay:.1s; opacity:0; }
  .anim-delay-2 { animation-delay:.2s; opacity:0; }
  .anim-delay-3 { animation-delay:.3s; opacity:0; }
  .anim-delay-4 { animation-delay:.4s; opacity:0; }

  .grain::after {
    content:''; position:fixed; inset:0; pointer-events:none; z-index:100;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
    opacity:.4;
  }

  .btn-gold {
    background: linear-gradient(135deg, #C4A35A, #d4b870, #a8863a);
    color: #17355B;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: .75rem;
    transition: all .3s ease;
    border: none;
    cursor: pointer;
  }
  .btn-gold:hover { transform:translateY(-1px); box-shadow:0 8px 24px rgba(196,163,90,.3); }

  .btn-outline {
    background: transparent;
    border: 1px solid rgba(23,53,91,.25);
    color: rgba(23,53,91,.7);
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: .75rem;
    transition: all .3s ease;
    cursor: pointer;
  }
  .btn-outline:hover { border-color:rgba(23,53,91,.6); color:#17355B; }

  .card-service {
    background: rgba(23,53,91,.03);
    border: 1px solid rgba(23,53,91,.1);
    transition: all .3s ease;
    cursor: pointer;
  }
  .card-service:hover {
    background: rgba(23,53,91,.06);
    border-color: rgba(23,53,91,.25);
    transform: translateY(-2px);
  }
  .card-service.selected {
    background: rgba(196,163,90,.08);
    border-color: rgba(196,163,90,.5);
  }

  .time-slot {
    background: rgba(23,53,91,.04);
    border: 1px solid rgba(23,53,91,.12);
    font-family:'Montserrat',sans-serif;
    font-size:.8rem;
    letter-spacing:.05em;
    transition:all .2s ease;
    cursor:pointer;
  }
  .time-slot:hover:not(.disabled) {
    background:rgba(196,163,90,.15);
    border-color:rgba(196,163,90,.4);
  }
  .time-slot.selected {
    background:rgba(196,163,90,.2);
    border-color:#C4A35A;
    color:#C4A35A;
  }
  .time-slot.disabled {
    opacity:.25;
    cursor:not-allowed;
    text-decoration:line-through;
  }

  .step-dot { transition: all .3s ease; }

  .input-field {
    background: rgba(255,255,255,.7);
    border: 1px solid rgba(23,53,91,.2);
    color: #17355B;
    font-family: 'Montserrat', sans-serif;
    font-size: .875rem;
    transition: border-color .2s;
    outline: none;
    width: 100%;
    padding: .75rem 1rem;
    border-radius: .5rem;
  }
  .input-field:focus { border-color: rgba(196,163,90,.5); }
  .input-field::placeholder { color:rgba(23,53,91,.35); }

  select.input-field option { background:#EFEEE8; }

  .divider {
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(23,53,91,.2), transparent);
  }

  .toast {
    position:fixed; top:1.5rem; left:50%; transform:translateX(-50%);
    z-index:9999; padding:.75rem 1.5rem; border-radius:2rem;
    font-family:'Montserrat',sans-serif; font-size:.8rem; letter-spacing:.05em;
    animation:fadeUp .3s ease;
    pointer-events:none;
  }
  .toast.success { background:rgba(34,197,94,.15); border:1px solid rgba(34,197,94,.3); color:#4ade80; }
  .toast.error { background:rgba(239,68,68,.15); border:1px solid rgba(239,68,68,.3); color:#f87171; }

  .calendar-day {
    aspect-ratio:1;
    display:flex;align-items:center;justify-content:center;
    border-radius:.625rem;
    font-family:'Montserrat',sans-serif;
    font-size:.8rem;
    cursor:pointer;
    transition:all .2s;
    border:1px solid transparent;
  }
  .calendar-day:hover:not(.disabled):not(.past) {
    background:rgba(196,163,90,.15);
    border-color:rgba(196,163,90,.3);
  }
  .calendar-day.selected {
    background:rgba(196,163,90,.2);
    border-color:#C4A35A;
    color:#C4A35A;
  }
  .calendar-day.disabled, .calendar-day.past {
    opacity:.25; cursor:not-allowed;
  }
  .calendar-day.today {
    border-color:rgba(23,53,91,.3);
  }

  /* Cards de servicio más redondeadas y elegantes */
  .card-service {
    border-radius: 1rem !important;
  }
  /* Input fields más redondeados */
  .input-field {
    border-radius: .75rem !important;
    background: rgba(255,255,255,.85) !important;
    box-shadow: 0 1px 4px rgba(23,53,91,.06);
  }
  .input-field:focus {
    border-color: rgba(23,53,91,.35) !important;
    box-shadow: 0 0 0 3px rgba(23,53,91,.07), 0 1px 4px rgba(23,53,91,.06);
  }
  /* Time slots más elegantes */
  .time-slot {
    border-radius: .875rem !important;
  }
  /* Separador elegante */
  .divider-gold {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(196,163,90,.35), transparent);
  }
  /* Headers de sección */
  .section-label {
    font-family: 'Montserrat', sans-serif;
    font-size: .65rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(23,53,91,.45);
  }



    #wapp-button { transition: none; }
    #wapp-label { display: inline !important; }
    @media screen and (max-width:640px) {
      #wapp-label { display: none !important; }
    }

  /* ─── FORM CLASSES (index.js) ─── */
  .form-label {
    display: block;
    font-size: .7rem;
    font-weight: 500;
    color: rgba(23,53,91,.5);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: .35rem;
    font-family: 'Montserrat', sans-serif;
  }
  .form-input {
    background: rgba(255,255,255,.85);
    border: 1px solid rgba(23,53,91,.2);
    color: #17355B;
    font-family: 'Montserrat', sans-serif;
    font-size: .875rem;
    outline: none;
    width: 100%;
    padding: .75rem 1rem;
    border-radius: .75rem;
    transition: border-color .2s, box-shadow .2s;
    box-shadow: 0 1px 4px rgba(23,53,91,.06);
  }
  .form-input:focus {
    border-color: rgba(23,53,91,.35);
    box-shadow: 0 0 0 3px rgba(23,53,91,.07), 0 1px 4px rgba(23,53,91,.06);
  }
  .form-input::placeholder { color: rgba(23,53,91,.35); }

  /* ─── MOBILE OPTIMIZATIONS (< 640px) ─── */
  @media (max-width: 640px) {
    /* Prevent iOS auto-zoom on input focus */
    .form-input,
    .input-field,
    .form-input select,
    textarea.form-input {
      font-size: 16px !important;
    }
    /* Touch-friendly tap targets */
    .btn-gold,
    .btn-outline {
      min-height: 48px;
    }
    /* Wider bottom bar padding for safe-area */
    .fixed.bottom-0.left-0.right-0 {
      padding-bottom: max(1rem, env(safe-area-inset-bottom, 1rem));
    }
  }