/* Native interaction states and narrow-screen refinements. */
[hidden] { display: none !important; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; opacity: .6; }
.mobile-only, .mobile-menu { display: none; }
.brand-line { flex-wrap: wrap; }
.brand-credit { flex-shrink: 0; }
.brand-credit img { flex-shrink: 0; }
/* Keep the primary actions above the fold on laptop-height viewports.
   The illustration may continue below; it must not push the copy down. */
.hero { padding-top: clamp(24px, 5svh, 56px); }
.hero-layout { align-items: flex-start; }
.hero-copy { gap: 20px; }
@media (min-width: 1040px) {
  .hero-title { font-size: clamp(38px, min(5.4vw, 8svh), 60px); }
}
[data-action="toggleMenu"] { flex-shrink: 0; }
.mobile-only > a { white-space: nowrap; }
.mobile-only > a:hover { background: #0950BB; color: white; }
.form-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.consent-label { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: #42536F; cursor: pointer; }
#waitlist-form .consent-label input { width: 18px; height: 18px; min-width: 18px; margin: 2px 0 0; accent-color: #0B63E5; }
.field-error { display: block; margin-top: 6px; font-size: 13px; color: #B42318; }
.form-error { padding: 12px; margin: 0; border: 1px solid #F5B5AE; background: #FFF8F7; color: #B42318; border-radius: 12px; font-size: 14px; line-height: 1.5; }
.form-contact { text-align: center; color: #42536F; font-size: 13px; overflow-wrap: anywhere; }
.success-badge { padding: 6px 10px; border-radius: 99px; background: #E3F8F0; color: #06704F; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.request-reference { margin: 0; font-size: 12px; color: #5A6A84; overflow-wrap: anywhere; }
.privacy-version { font-size: 13px; }
#form-success, #form-error, #waitlist-form input { scroll-margin-top: 100px; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 100; padding: 14px 22px; background: white; border: 2px solid #0B63E5; border-radius: 12px; }
.skip-link:focus { top: 12px; }
.demo-step { border: 1px solid #E3EAF5; background: transparent; box-shadow: none; }
.demo-step[aria-pressed="true"] { border-color: #0B63E5; background: white; box-shadow: 0 16px 36px -22px rgba(11,99,229,.6); }
.step-number { background: #EEF2F8; color: #4B5C78; }
.is-complete .step-number { background: #E3F8F0; color: #06704F; }
.demo-step[aria-pressed="true"] .step-number { background: #0B63E5; color: white; }
.demo-slot { border: 1px solid #BFD0E8; background: white; color: #0B1A33; }
.demo-slot:hover { border-color: #0B63E5; }
.demo-slot[aria-pressed="true"] { border-color: #0B63E5; background: #0B63E5; color: white; }
.agenda-cell { border: 1px solid #EEF2F8; background: white; color: #42536F; }
.agenda-cell.is-busy { border-color: #E9EDF3; background: #E9EDF3; }
.agenda-cell.is-available { border-color: #10C48C; background: #E3F8F0; color: #06704F; }
.agenda-cell.is-booked { border-color: #0B63E5; background: #0B63E5; color: white; transform: scale(1.06); }
.demo-hint { align-self: center; font-size: 13px; color: #0A4FB8; background: #E6F0FF; padding: 6px 12px; border-radius: 14px; text-align: center; }
.demo-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.demo-controls button { min-height: 40px; white-space: nowrap; }
#como-funciona .layout-107 { flex-wrap: wrap; gap: 12px; }
.faq-icon { background: #EEF4FF; color: #0B63E5; }
[aria-expanded="true"] .faq-icon { background: #0B63E5; color: white; transform: rotate(45deg); }
[data-action="toggleMenu"][aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
[data-action="toggleMenu"][aria-expanded="true"] span:nth-child(2) { opacity: 0; }
[data-action="toggleMenu"][aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.booking-pending { opacity: 0; }
[data-hero-booked] { transition: opacity .3s; }
input[aria-invalid="true"] { border-color: #D92D20; background: #FFF8F7; }
input:focus-visible { outline: 3px solid #0B63E5; outline-offset: 3px; }
dialog { width: min(520px, calc(100% - 32px)); border: 1px solid #D5E0EF; border-radius: 24px; padding: 28px; color: #0B1A33; box-shadow: 0 24px 80px #01081440; }
dialog::backdrop { background: #01081499; backdrop-filter: blur(4px); }
dialog h2 { margin: 0 0 16px; font-size: 24px; }
dialog p { line-height: 1.6; color: #42536F; }
dialog button { margin-top: 12px; border: 0; border-radius: 99px; padding: 12px 24px; background: #0B63E5; color: white; font-weight: 600; cursor: pointer; }
.noscript-note { padding: 20px; margin: 0; background: #FFF8E8; color: #7A4A00; text-align: center; }
@media (max-width: 1039px) {
  .desktop-only { display: none; }
  .mobile-only { display: flex; }
  .mobile-menu:not([hidden]) { display: flex; }
}
@media (min-width: 1040px) {
  #menu-movil { display: none !important; }
}
@media (max-width: 600px) {
  .hero { padding-top: 24px; }
  .hero-copy { gap: 16px; }
  .site-nav { gap: 10px; padding: 12px 16px; }
  .site-nav .brand-logo { height: 25px; }
  .brand-line { gap: 10px; }
  .brand-line > span:last-child { flex-basis: 100%; max-width: 300px; }
  .brand-divider { display: none; }
  #inicio h1 { font-size: clamp(34px, 8.5vw, 44px); }
  #lista-espera > div { padding: 32px 16px; }
  #waitlist-form { gap: 16px; }
  #waitlist-form input { width: 100%; min-width: 0; }
  #lista-espera > div > div:last-child { padding: 24px 18px; width: 100%; }
  #lista-espera h2 { font-size: 34px; }
  #como-funciona ol { max-width: none; }
  #como-funciona .demo-step { padding: 16px; gap: 12px; }
  #proximamente aside > div:first-child { min-width: 0; }
}
@media (max-width: 360px) {
  .site-nav .brand-logo { height: 22px; }
  .chat-header { flex-wrap: wrap; gap: 8px; }
  .chat-header .example-badge { flex-basis: 100%; text-align: center; }
  header .mobile-only > a { padding: 10px 12px; font-size: 13px; }
  #inicio h1 { font-size: 34px; }
  #hero-messages { height: 390px; padding: 10px; }
  #lista-espera h2 { font-size: 30px; }
}

/* The waitlist preserves the original form styling, including native selects. */
#waitlist-form select { width: 100%; min-width: 0; font-family: inherit; scroll-margin-top: 100px; }
select[aria-invalid="true"] { border-color: #D92D20; background: #FFF8F7; }
select:focus-visible { outline: 3px solid #0B63E5; outline-offset: 3px; }
#lista-espera .layout-162 { align-items: flex-start; }
#lista-espera .layout-164 { padding-top: 16px; }
#lista-espera .layout-168, #lista-espera .layout-169 { flex-shrink: 0; }