/* WayOfLearning mobile polish
   Mobile-only responsive refinements. Desktop styles are intentionally untouched. */

@media (max-width: 899px) {
  html {
    scroll-padding-top: 5rem;
  }

  body {
    overflow-x: clip;
  }

  body.route-public .public-site > section,
  body.route-about main > section {
    scroll-margin-top: 5rem;
  }

  body.route-public input,
  body.route-public select,
  body.route-public textarea,
  body.route-auth input,
  body.route-auth select,
  body.route-auth textarea,
  body.route-policy input,
  body.route-policy select,
  body.route-policy textarea {
    font-size: 16px;
  }

  body.route-public button,
  body.route-public a,
  body.route-auth button,
  body.route-auth a,
  body.route-policy button,
  body.route-policy a,
  body.route-about button,
  body.route-about a {
    -webkit-tap-highlight-color: transparent;
  }
}

@media (max-width: 767px) {
  :root {
    --wol-mobile-gutter: 1rem;
    --wol-mobile-radius: 1rem;
  }

  /* Shared mobile header and navigation */
  body.route-public .public-site > header,
  body.route-auth .public-site > header,
  body.route-about > div > header {
    padding-top: env(safe-area-inset-top);
  }

  body.route-public .public-site > header > div,
  body.route-auth .public-site > header > div,
  body.route-about > div > header > div {
    min-height: 4rem;
  }

  body.route-public #public-mobile-menu,
  body.route-auth #public-mobile-menu {
    top: calc(4rem + env(safe-area-inset-top));
    bottom: 0;
    max-height: none;
    padding: 0.75rem var(--wol-mobile-gutter) calc(1.25rem + env(safe-area-inset-bottom));
    overscroll-behavior: contain;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(18px);
  }

  body.route-public:has(#public-mobile-menu),
  body.route-auth:has(#public-mobile-menu) {
    overflow: hidden;
  }

  body.route-public #public-mobile-menu nav,
  body.route-auth #public-mobile-menu nav {
    gap: 0.25rem;
  }

  body.route-public #public-mobile-menu nav a,
  body.route-auth #public-mobile-menu nav a {
    min-height: 3rem;
    display: flex;
    align-items: center;
    border-radius: 0.85rem;
    padding-inline: 0.9rem;
    font-size: 0.96rem;
  }

  body.route-public #public-mobile-menu > div:last-child,
  body.route-auth #public-mobile-menu > div:last-child {
    position: sticky;
    bottom: 0;
    padding-top: 0.75rem;
    padding-bottom: 0.25rem;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 28%);
  }

  body.route-public #public-mobile-menu > div:last-child a,
  body.route-auth #public-mobile-menu > div:last-child a {
    min-height: 3rem;
  }

  /* Home hero */
  body.route-home .public-site > section:first-of-type {
    padding-top: 5.25rem !important;
  }

  body.route-home .public-site > section:first-of-type > div:last-child {
    gap: 1.75rem !important;
    padding-inline: var(--wol-mobile-gutter) !important;
    padding-bottom: 3.25rem !important;
  }

  body.route-home .public-site > section:first-of-type h1 {
    margin-top: 1.25rem !important;
    max-width: 12ch;
    font-size: clamp(2.35rem, 11vw, 3.35rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.035em !important;
    text-wrap: balance;
  }

  body.route-home .public-site > section:first-of-type p {
    margin-top: 1.15rem !important;
    max-width: 34rem;
    font-size: 1rem !important;
    line-height: 1.65 !important;
  }

  body.route-home .public-site > section:first-of-type a[href="/registro"],
  body.route-home .public-site > section:first-of-type a[href="#como-funciona"] {
    width: 100%;
    min-height: 3rem;
  }

  body.route-home .public-site > section:first-of-type .public-laptop {
    display: block !important;
    width: 100%;
    margin-top: 0.35rem;
  }

  body.route-home .public-site > section:first-of-type .public-laptop-screen {
    border-radius: 0.9rem;
  }

  body.route-home .public-site > section:first-of-type .public-laptop-base {
    transform: scaleX(0.92);
    transform-origin: top center;
  }

  /* Public page rhythm */
  body.route-home .public-site > section:not(:first-of-type) {
    padding-top: 4.25rem !important;
    padding-bottom: 4.25rem !important;
  }

  body.route-home .public-site > section > div,
  body.route-public .public-site > main > div {
    padding-inline: var(--wol-mobile-gutter) !important;
  }

  body.route-home .public-site > section h2,
  body.route-public .public-site > main h1,
  body.route-about main h1 {
    text-wrap: balance;
  }

  body.route-home .public-site > section h2 {
    font-size: clamp(1.9rem, 8.5vw, 2.55rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.025em !important;
  }

  body.route-home .public-site > section [class*="mt-14"],
  body.route-home .public-site > section [class*="mt-12"] {
    margin-top: 2rem !important;
  }

  body.route-home .public-site article,
  body.route-public .public-site main article,
  body.route-about main article {
    border-radius: var(--wol-mobile-radius) !important;
  }

  /* How it works becomes a clear vertical sequence */
  body.route-home #como-funciona > div > div:last-child {
    position: relative;
    gap: 1rem !important;
  }

  body.route-home #como-funciona > div > div:last-child::before {
    content: "";
    position: absolute;
    top: 2.25rem;
    bottom: 2.25rem;
    left: 2.1rem;
    width: 1px;
    background: linear-gradient(to bottom, rgba(14, 165, 233, 0.26), rgba(16, 185, 129, 0.26));
    pointer-events: none;
  }

  body.route-home #como-funciona article {
    padding: 1.1rem !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
  }

  body.route-home #como-funciona article > div:first-child {
    position: relative;
    z-index: 1;
    margin-bottom: 0.9rem !important;
  }

  body.route-home #como-funciona .public-browser-frame {
    margin-top: 0.15rem;
  }

  /* Dense content remains readable without becoming endless */
  body.route-home #funciones > div > div:last-child,
  body.route-home #accesibilidad > div > div:last-child {
    gap: 0.85rem !important;
  }

  body.route-home #funciones article,
  body.route-home #accesibilidad article {
    padding: 1.1rem !important;
  }

  body.route-home #funciones article h3,
  body.route-home #accesibilidad article h3 {
    margin-top: 0.9rem !important;
  }

  body.route-home #para-quien-es > div {
    gap: 2rem !important;
  }

  body.route-home #para-quien-es > div > div:last-child {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem !important;
  }

  body.route-home #para-quien-es > div > div:last-child > div {
    min-height: 5.4rem;
    align-items: flex-start;
    padding: 0.85rem !important;
    border-radius: 0.9rem !important;
  }

  body.route-home #para-quien-es > div > div:last-child span {
    font-size: 0.87rem;
    line-height: 1.25;
  }

  /* Screenshots become a swipeable gallery instead of a very long stack */
  body.route-home .public-site > section:has(.public-browser-frame:not(.public-browser-frame--compact)) > div > div:last-child {
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(84%, 1fr);
    grid-template-columns: none !important;
    gap: 1rem !important;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
    margin-inline: calc(var(--wol-mobile-gutter) * -1);
    padding-inline: var(--wol-mobile-gutter);
    padding-bottom: 0.75rem;
  }

  body.route-home .public-site > section:has(.public-browser-frame:not(.public-browser-frame--compact)) > div > div:last-child::-webkit-scrollbar {
    display: none;
  }

  body.route-home .public-site > section:has(.public-browser-frame:not(.public-browser-frame--compact)) article {
    scroll-snap-align: center;
    min-width: 0;
  }

  /* FAQ and final calls to action */
  body.route-home #faq details {
    padding: 1rem !important;
  }

  body.route-home #faq summary {
    min-height: 2.75rem;
    font-size: 0.98rem;
  }

  body.route-home .public-site > section.bg-slate-950 a,
  body.route-home #newsletter button {
    width: 100%;
  }

  body.route-home .public-site > section.bg-slate-950 > div > div:last-child {
    width: 100%;
  }

  body.route-home #newsletter > div {
    gap: 2rem !important;
  }

  body.route-home #newsletter form {
    padding: 1rem !important;
    border-radius: var(--wol-mobile-radius) !important;
  }

  body.route-home #newsletter label.flex {
    padding: 0.9rem !important;
  }

  /* FAQ and contact subpages */
  body.route-public:not(.route-home):not(.route-about) .public-site > main {
    padding-top: 5.5rem !important;
  }

  body.route-public:not(.route-home):not(.route-about) .public-site > main > div {
    padding-top: 2rem !important;
    padding-bottom: 4rem !important;
  }

  body.route-public:not(.route-home):not(.route-about) .public-site > main h1 {
    font-size: clamp(2.15rem, 10vw, 3rem) !important;
    line-height: 1.07 !important;
    letter-spacing: -0.03em !important;
  }

  body.route-public:not(.route-home):not(.route-about) .public-site > main article,
  body.route-public:not(.route-home):not(.route-about) .public-site > main form,
  body.route-public:not(.route-home):not(.route-about) .public-site > main aside {
    padding: 1rem !important;
    border-radius: var(--wol-mobile-radius) !important;
  }

  body.route-public:not(.route-home):not(.route-about) .public-site > main form button[type="submit"] {
    width: 100%;
    min-height: 3rem;
    justify-content: center;
  }

  body.route-public:not(.route-home):not(.route-about) .public-site > main textarea {
    min-height: 9rem !important;
  }

  /* Authentication: shorter introduction, form closer to the top */
  body.route-auth .public-site > main {
    padding-top: 5.25rem !important;
  }

  body.route-auth .public-site > main > div {
    min-height: auto !important;
    gap: 1.5rem !important;
    padding-inline: var(--wol-mobile-gutter) !important;
    padding-bottom: 3.5rem !important;
  }

  body.route-auth .public-site > main > div > section:first-child h1 {
    font-size: clamp(2.15rem, 10vw, 3rem) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.03em !important;
  }

  body.route-auth .public-site > main > div > section:first-child > p {
    margin-top: 0.9rem !important;
    font-size: 1rem !important;
    line-height: 1.65 !important;
  }

  body.route-auth .public-site > main > div > section:last-child {
    padding: 1rem !important;
    border-radius: var(--wol-mobile-radius) !important;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.10) !important;
  }

  body.route-auth .public-site > main input,
  body.route-auth .public-site > main select,
  body.route-auth .public-site > main button {
    min-height: 3rem;
  }

  body.route-auth .public-site > main label.flex {
    padding: 0.85rem !important;
  }

  /* Dedicated About page */
  body.route-about main > section:first-child {
    padding-top: 5.75rem !important;
  }

  body.route-about main > section:first-child > div:last-child {
    gap: 2rem !important;
    padding-inline: var(--wol-mobile-gutter) !important;
    padding-bottom: 3.75rem !important;
  }

  body.route-about main > section:first-child h1 {
    margin-top: 1.25rem !important;
    font-size: clamp(2.3rem, 10.8vw, 3.25rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.035em !important;
  }

  body.route-about main > section:first-child p {
    font-size: 1rem !important;
    line-height: 1.65 !important;
  }

  body.route-about main > section:first-child a[href="/registro"],
  body.route-about main > section:first-child a[href="/contacto"] {
    width: 100%;
  }

  body.route-about main > section:first-child > div:last-child > div:last-child > div {
    padding: 1rem !important;
    border-radius: var(--wol-mobile-radius) !important;
  }

  body.route-about main > section:not(:first-child) {
    padding-top: 4.25rem !important;
    padding-bottom: 4.25rem !important;
  }

  body.route-about main > section:not(:first-child) > div {
    padding-inline: var(--wol-mobile-gutter) !important;
  }

  body.route-about main > section:not(:first-child) h2 {
    font-size: clamp(1.85rem, 8vw, 2.45rem) !important;
    line-height: 1.12 !important;
    text-wrap: balance;
  }

  body.route-about main article {
    padding: 1rem !important;
  }

  body.route-about .lg\:sticky {
    position: static !important;
  }

  /* Legal pages: compact header, horizontal document tabs and readable text */
  body.route-policy header > div {
    min-height: 4rem;
    gap: 0.5rem !important;
    padding-inline: 0.75rem !important;
  }

  body.route-policy header a[href="/"]:last-child {
    padding: 0.65rem 0.85rem !important;
    font-size: 0.8rem !important;
    white-space: nowrap;
  }

  body.route-policy .legal-shell {
    padding: 1rem 0.75rem 3rem !important;
  }

  body.route-policy .legal-shell > section {
    border-radius: 1.15rem !important;
  }

  body.route-policy .legal-shell > section > div:first-child {
    gap: 1.25rem !important;
    padding: 1.25rem !important;
  }

  body.route-policy .legal-shell h1 {
    font-size: clamp(2.15rem, 10vw, 3rem) !important;
    line-height: 1.05 !important;
  }

  body.route-policy .legal-shell > section > div:first-child p.text-lg {
    font-size: 1rem !important;
    line-height: 1.65 !important;
  }

  body.route-policy .legal-shell > section > div:first-child > div:last-child {
    width: 3rem !important;
    height: 3rem !important;
  }

  body.route-policy .legal-shell > section > div:nth-child(2) {
    overflow-x: auto;
    padding-inline: 0.75rem !important;
    scrollbar-width: none;
  }

  body.route-policy .legal-shell > section > div:nth-child(2)::-webkit-scrollbar {
    display: none;
  }

  body.route-policy .legal-shell > section > div:nth-child(2) nav {
    width: max-content;
    min-width: 100%;
    flex-wrap: nowrap !important;
  }

  body.route-policy .legal-document {
    padding-inline: 1rem !important;
    border-radius: 1rem !important;
  }

  body.route-policy .legal-section {
    padding-block: 1.5rem !important;
  }

  body.route-policy .legal-section h2 {
    font-size: 1.38rem !important;
    line-height: 1.2 !important;
  }

  body.route-policy .legal-section p,
  body.route-policy .legal-section li {
    font-size: 0.97rem !important;
    line-height: 1.72 !important;
  }

  body.route-policy .legal-no-print details {
    border-radius: 0.9rem !important;
  }

  /* Footer */
  body.route-public .public-site > footer > div:first-child,
  body.route-about footer > div:first-child {
    gap: 2rem !important;
    padding: 2.5rem var(--wol-mobile-gutter) !important;
  }

  body.route-public .public-site > footer > div:first-child > div:last-child,
  body.route-about footer > div:first-child > div:last-child {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem 1rem !important;
  }

  body.route-public .public-site > footer > div:last-child,
  body.route-about footer > div:last-child {
    padding-inline: var(--wol-mobile-gutter) !important;
    line-height: 1.5;
  }
}

@media (max-width: 420px) {
  body.route-policy header a[href="/"] > span,
  body.route-about header a[href="/"] > span {
    display: none;
  }

  body.route-home #para-quien-es > div > div:last-child {
    grid-template-columns: 1fr;
  }

  body.route-home .public-site > section:has(.public-browser-frame:not(.public-browser-frame--compact)) > div > div:last-child {
    grid-auto-columns: 90%;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 899px) {
  body.route-public *,
  body.route-auth *,
  body.route-policy *,
  body.route-about * {
    scroll-behavior: auto !important;
  }
}