/* Small-screen adaptations. Desktop styles remain in landing.css. */
@media (max-width: 1050px) {
  section[id], #demo { scroll-margin-top: 130px; }
  .landing-header { padding: 8px 12px !important; }
  .landing-header > div {
    height: auto !important; min-height: 96px; padding: 10px 16px 5px !important;
    display: grid !important; grid-template-columns: 1fr auto; gap: 4px 12px !important;
    border-radius: 20px !important;
  }
  .landing-header > div > div:first-child { gap: 7.2px !important; }
  .landing-header > div > div:first-child > div { width: 27.2px !important; height: 27.2px !important; }
  .landing-header > div > div:first-child > span { font-size: 16.8px !important; }
  .landing-header nav { grid-row: 2; grid-column: 1 / -1; width: 100%; justify-content: space-between; gap: 8px !important; font-size: 12px !important; }
  .landing-header nav a { display: flex; align-items: center; min-height: 40px; }
  .landing-header > div > div:last-child a { display: flex; align-items: center; min-height: 40px; font-size: 12px !important; padding: 9px 12px !important; white-space: nowrap; }
  .landing-header-spacer { height: 112px !important; }
  .landing-hero-copy { padding: 36px 17px 0 !important; }
  .landing-hero-copy h1 { font-size: clamp(24px, 3.71vw, 35px) !important; line-height: 1.1 !important; }
  #producto .landing-product-copy h2 { font-size: clamp(24px, 3.71vw, 35px) !important; line-height: 1.1 !important; }
  .landing-hero-copy > div:first-child { max-width: 100%; line-height: 1.5; }
  .landing-hero-preview { width: calc(100% - 32px) !important; margin-top: 25px !important; }
  #producto > div:last-child, #recordatorios > div, #plantillas > div:nth-child(5), #demo { padding: 56px 24px !important; }
  #recordatorios > div, #demo > div { grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; }
  #recordatorios > div > div:last-child, #demo > div > div:last-child { width: 100%; max-width: 620px; justify-self: center; }
  #plantillas p { width: auto !important; height: auto !important; }
  #plantillas h2, #recordatorios h2, #precio h2 { font-size: 32px !important; }
  .landing-doc-carousel { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px 16px !important; max-width: 520px; margin: 0 auto; touch-action: pan-y; }
  .landing-doc-carousel > div { grid-column: 1 / -1; grid-row: 1; }
  .landing-doc-carousel > button { width: 44px !important; height: 44px !important; }
  .landing-doc-carousel > button:first-child { justify-self: end; }
  .landing-doc-carousel > button:last-child { justify-self: start; }
  [data-doc-strip] { padding: 8px 0 20px !important; }
  .landing-doc-card { flex: 0 0 100% !important; transform: none !important; opacity: 1 !important; }
  .landing-doc-card:not([data-doc-order="0"]) { display: none !important; }
  .landing-doc-pagination { margin-top: 8px !important; }
  .landing-doc-pagination > div { gap: 0 !important; }
  .landing-doc-pagination button { position: relative; width: 40px !important; height: 44px !important; background: transparent !important; }
  .landing-doc-pagination button::after { content: ""; position: absolute; top: 18px; left: 16px; width: 8px; height: 8px; border-radius: 99px; background: #d1d5db; }
  .landing-doc-pagination button[aria-current="true"]::after { left: 9px; width: 22px; background: #3b82f6; }
  footer > div { padding: 28px 24px !important; gap: 20px !important; flex-wrap: wrap; }
}

@media (max-width: 700px) {
  .landing-hero-copy { padding: 25px 14px 0 !important; }
  .landing-app-preview__playback {
    width: clamp(64px, calc(170px - 15vw), 124px);
    height: clamp(64px, calc(170px - 15vw), 124px);
    right: 24px;
    bottom: 24px;
    border-radius: 34%;
  }
  .landing-app-preview__playback svg { width: 40%; height: 40%; }
  .landing-hero-copy > div:first-child { font-size: 9px !important; padding: 5px 8px !important; }
  .landing-hero-copy h1 { margin-top: 14px !important; font-size: clamp(24px, 6.23vw, 31px) !important; }
  #producto .landing-product-copy h2 { font-size: clamp(24px, 6.23vw, 31px) !important; }
  .landing-product-copy > div:first-child { font-size: 13.5px !important; }
  .landing-hero-copy > p { font-size: 12px !important; line-height: 1.65 !important; }
  .landing-hero-copy > div:has(> a) { gap: 7px !important; }
  .landing-hero-copy > div > a { width: 100%; justify-content: center; min-height: 40px; }
  #producto > div:last-child, #recordatorios > div, #plantillas > div:nth-child(5), #demo { padding: 48px 20px !important; }
  #producto h2, #plantillas h2, #recordatorios h2, #precio h2 { font-size: 30px !important; line-height: 1.15 !important; }
  [data-pila-carril] { height: auto !important; display: flex; flex-direction: column; gap: 12px; }
  [data-servicio] { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; max-width: none !important; transform: none !important; z-index: auto !important; }
  [data-capa] { transform: none !important; }
  [data-capa] > button { height: auto !important; min-height: 56px; padding: 14px 16px !important; text-align: left; gap: 10px !important; }
  [data-servicio][data-inactiva="true"] [data-capa] > div[aria-hidden] { display: none; }
  .landing-service-content { flex-direction: column !important; padding: 6px 16px 18px !important; gap: 22px !important; }
  .landing-service-content > div:first-child { flex: none !important; width: 100% !important; min-width: 0 !important; max-width: none !important; }
  .landing-service-demo { flex: none !important; width: 100% !important; min-width: 0 !important; zoom: 1 !important; }
  .landing-service-demo > div { padding: 10px !important; }
  #demo > div > div:first-child > div:has(> a) { flex-direction: column; align-items: stretch !important; }
  #demo a { justify-content: center; text-align: center; min-height: 48px; }
  #demo > div > div:last-child { padding: 26px !important; }
  footer > div { flex-direction: column; align-items: flex-start !important; font-size: 12px !important; }
  footer > div > div { flex-wrap: wrap; gap: 16px !important; }
  [data-landing-modal] { padding: 8px !important; }
  [data-landing-modal] > div { max-height: calc(100dvh - 16px) !important; width: 100% !important; border-radius: 16px !important; }
  [data-landing-modal] > div > div:first-child { padding: 10px 12px !important; gap: 8px !important; }
  [data-landing-modal] > div > div:first-child > div { min-width: 0 !important; }
  [data-landing-modal] button { min-width: 44px; min-height: 44px; }
  [data-landing-scroll] { padding: 12px !important; min-height: 0; }
  .landing-document-page { padding: 22px 18px !important; min-height: 700px !important; }
  .landing-document-page > div:first-child { flex-wrap: wrap; gap: 10px !important; }
  .landing-document-page > div:first-child > span { width: 42px !important; height: 42px !important; }
  .landing-document-page > div:first-child > div:last-child { width: 100%; text-align: left !important; }
  .landing-document-page > div:nth-child(3) { flex-wrap: wrap; gap: 10px; }
  [data-landing-modal] > div > div:last-child { padding: 10px 12px !important; gap: 8px !important; }
  [data-landing-modal] > div > div:last-child > span { margin-left: 0 !important; }
}

@media (max-width: 700px) {
  .landing-patient-heading { flex-wrap: wrap; gap: 10px !important; }
  .landing-patient-heading > div:first-child { width: 40px !important; height: 40px !important; }
  .landing-patient-heading > div:last-child { flex-basis: 170px !important; }
  .landing-patient-heading > div:last-child > div:first-child > div:first-child { min-width: 0 !important; white-space: normal !important; font-size: 16px !important; }
  .landing-patient-heading > div:last-child > div:first-child > div:last-child { flex-wrap: wrap; margin-left: 0 !important; }
  .landing-patient-alert { flex-wrap: wrap; gap: 8px !important; }
  .landing-patient-alert > span:nth-of-type(2) { flex-basis: 100% !important; order: 3; }
  .landing-patient-tabs { flex-wrap: wrap; gap: 8px 12px !important; }
  .landing-patient-tabs > span { flex: none !important; }
  .landing-reminder-recipient { flex-wrap: wrap; gap: 4px !important; margin-left: 0 !important; padding-left: 8px !important; }
  .landing-reminder-recipient > span { flex-basis: 100%; overflow-wrap: anywhere; }
  #recordatorios button { min-height: 40px; }
}
@media (max-width: 360px) {
  .landing-header > div { padding-left: 10px !important; padding-right: 10px !important; gap: 4px 8px !important; }
  .landing-header > div > div:first-child { gap: 5.6px !important; }
  .landing-header > div > div:first-child > span { font-size: 14.4px !important; }
  .landing-header > div > div:last-child a { font-size: 11px !important; padding: 8px 10px !important; }
  .landing-header nav { font-size: 11px !important; }
  #recordatorios > div > div:last-child > div:last-child { padding: 12px !important; }
  #recordatorios > div > div:last-child > div:last-child > div > div:first-child { flex-wrap: wrap; gap: 10px !important; }
}

@media (max-width: 700px) {
  .landing-appointment-calendar { grid-template-columns: minmax(0, 1fr) !important; }
  .landing-appointment-calendar > div:first-child > div:last-child > span { height: 22px !important; font-size: 10px !important; }
  [data-servicio="3"] .landing-service-demo div { white-space: normal !important; overflow-wrap: anywhere; }
  [data-servicio="3"] .landing-service-demo > div > div > div:first-child,
  [data-servicio="3"] .landing-service-demo > div > div > div > div > div:first-child { flex-wrap: wrap; }
  [data-servicio="4"] .landing-service-demo > div > div:nth-child(2) > div:first-child { flex-wrap: wrap; gap: 8px; }
  [data-servicio="4"] .landing-service-demo > div > div:last-child { overflow-x: auto; }
  [data-servicio="4"] .landing-service-demo > div > div:last-child > div { min-width: 300px; }
}
@media (max-width: 360px) {
  [data-servicio="2"] .landing-service-demo > div > div:nth-child(2) { grid-template-columns: minmax(0, 1fr) !important; }
}
