/* JANADENT - Fix móvil controlado
   Este archivo solo afecta tablet/móvil.
   No modifica escritorio.
*/

@media (max-width: 768px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  * {
    box-sizing: border-box;
  }

  img,
  svg {
    max-width: 100%;
    height: auto;
  }

  .container {
    width: calc(100% - 32px) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .site-header {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .header-content {
    min-height: 72px;
    justify-content: space-between;
  }

  .brand {
    max-width: 150px !important;
    overflow: hidden;
  }

  .brand-logo {
    width: 140px !important;
    max-width: 140px !important;
    height: auto !important;
    display: block;
  }

  .main-nav {
    display: none !important;
  }

  .header-cta {
    display: none !important;
  }

  main,
  section {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .hero {
    padding: 48px 0 52px !important;
  }

  .hero-grid,
  .trust-grid,
  .services-grid,
  .process-grid,
  .booking-grid,
  .form-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 28px !important;
  }

  .hero-copy,
  .hero-card,
  .trust-item,
  .service-card,
  .process-step,
  .booking-copy,
  .booking-form,
  .booking-help,
  .booking-help-content,
  .whatsapp-box,
  .form-group {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  h1 {
    max-width: 100% !important;
    font-size: clamp(2.25rem, 11vw, 3.25rem) !important;
    line-height: 1.02 !important;
  }

  h2 {
    max-width: 100% !important;
    font-size: clamp(1.9rem, 9vw, 2.65rem) !important;
    line-height: 1.08 !important;
  }

  h3,
  p,
  label,
  .form-note {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
  }

  .hero-text {
    max-width: 100% !important;
    font-size: 1rem !important;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .hero-actions .btn,
  .btn,
  button,
  input,
  select,
  textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .hero-card {
    min-height: 420px !important;
    padding: 20px !important;
  }

  .hero-card .floating-card {
    width: 100% !important;
    max-width: 340px !important;
    padding: 16px !important;
  }

  .section {
    padding: 64px 0 !important;
  }

  #reserva {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  #reserva > .container.booking-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: calc(100% - 32px) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 28px !important;
  }

  #reserva .booking-form {
    padding: 22px !important;
    border-radius: 26px !important;
    overflow: hidden !important;
  }

  #reserva .form-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
  }

  #reserva .booking-help {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    margin-top: 22px !important;
  }

  #reserva .booking-help-visual {
    display: none !important;
  }

  #reserva .contact-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .site-footer {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .site-footer .container,
  .footer-content {
    width: calc(100% - 32px) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
  }

  .footer-brand,
  .footer-info {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .footer-logo {
    width: 170px !important;
    max-width: 70% !important;
    height: auto !important;
  }

  .footer-info p,
  .footer-brand p,
  .footer-info a {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
  }
}

/* Ajuste visual móvil: hero card más compacta */
@media (max-width: 768px) {
  .hero-card {
    min-height: 520px !important;
    padding: 18px !important;
    border-radius: 28px !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
  }

  .hero-card .floating-card {
    width: 92% !important;
    max-width: 320px !important;
    padding: 18px 20px !important;
    border-radius: 24px !important;
    margin-bottom: 8px !important;
  }

  .hero-card .floating-card h2 {
    font-size: 1.7rem !important;
    line-height: 1.05 !important;
    margin-bottom: 10px !important;
  }

  .hero-card .floating-card p {
    font-size: 0.95rem !important;
    line-height: 1.45 !important;
  }

  .hero-card .hero-photo-frame {
    inset: 12px !important;
    border-radius: 24px !important;
  }

  .hero-photo {
    border-radius: 24px !important;
  }
}

/* Tarjetas con vida visual en móvil */
@media (max-width: 768px) {
  .service-card,
  .process-step,
  .trust-item {
    border-color: rgba(255, 179, 128, 0.45) !important;
    background:
      radial-gradient(circle at top right, rgba(255, 179, 128, 0.14), transparent 34%),
      #ffffff !important;
    box-shadow: 0 18px 42px rgba(85, 50, 117, 0.10) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  }

  .service-card:active,
  .process-step:active,
  .trust-item:active {
    transform: translateY(-4px) !important;
    box-shadow: 0 24px 54px rgba(85, 50, 117, 0.16) !important;
  }

  .service-card h3,
  .process-step h3,
  .trust-item h3 {
    color: var(--color-primary-dark) !important;
  }

  .service-card::before,
  .process-step::before {
    background: linear-gradient(180deg, var(--color-primary), var(--color-accent)) !important;
  }
}

/* Hero móvil: ocultar tarjeta flotante y dejar solo imagen */
@media (max-width: 768px) {
  .hero-card .floating-card {
    display: none !important;
  }

  .hero-card {
    min-height: auto !important;
    padding: 16px !important;
    display: block !important;
    border-radius: 28px !important;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)) !important;
  }

  .hero-card .hero-photo-frame {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  .hero-card .hero-photo-frame::after {
    display: none !important;
  }

  .hero-card .hero-photo {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    object-fit: cover !important;
    border-radius: 24px !important;
  }
}