/* ─── Base ───────────────────────────────────────────────────── */
/* Manrope is loaded from Google Fonts via <link> in index.html */

html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  font-family: var(--font-body);
  font-weight: var(--weight-book);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  background-color: var(--color-black);
  color: var(--color-white);
  background-image:
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 80px 80px;
}

/* Ensure media never causes horizontal overflow */
img, svg, video, iframe {
  max-width: 100%;
}

/* Long URLs / emails wrap instead of pushing layout */
a[href^="mailto:"], a[href^="http"] {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ─── Mobile fixes (small phones ≤480px) ─────────────────────── */

@media (max-width: 480px) {
  /* Disable nowrap on hero h1 ("ya usa IA.") at very small widths */
  .hero__headline span[style*="nowrap"] {
    white-space: normal !important;
  }

  /* Hero h1 size cap for tiny screens */
  .hero__content .h1 {
    font-size: clamp(2.25rem, 9vw, 2.75rem);
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  /* Wizard inputs less giant on phones */
  .wizard__input,
  .wizard__textarea {
    font-size: 1.0625rem;
  }

  .wizard__question {
    font-size: clamp(1.25rem, 6vw, 1.5rem);
  }

  .wizard__title {
    font-size: clamp(1.5rem, 7vw, 2rem) !important;
  }

  /* Compress modal padding on small phones */
  .modal-overlay {
    padding: 1rem;
  }

  .modal__close {
    top: 0.75rem;
    right: 1rem;
  }

  /* Wizard back / next button stack instead of overflow */
  .wizard__nav {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  /* Symptom card padding tighter */
  .symptom {
    padding: 1.25rem !important;
  }

  /* Service cards: keep buttons within bounds */
  .service-card {
    padding: 1.5rem !important;
  }

  /* Caso real items don't overflow */
  .case__col {
    padding: 1.5rem !important;
  }

  /* Pillars more compact */
  .pillar {
    padding: 1.5rem !important;
  }

  /* Footer items stack cleanly */
  .footer__inner {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 1.5rem;
  }

  .footer__links {
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem !important;
  }

  /* Process steps don't overflow */
  .step {
    gap: 1rem !important;
  }

  .step__num {
    min-width: 2.5ch;
  }
}

/* ─── Selection ──────────────────────────────────────────────── */

::selection {
  background-color: var(--color-yellow);
  color: var(--color-black);
}

/* ─── Scrollbar ──────────────────────────────────────────────── */

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-black); }
::-webkit-scrollbar-thumb { background: var(--color-white); }