/*
 * Kids Kingdom — capa responsive.
 *
 * Este archivo solo contiene reglas para tablet y celular. Las reglas de
 * escritorio permanecen intactas en las hojas originales.
 */

@media (max-width: 860px) {
  .nav-actions,
  .nav > div:not(.menu) {
    display: none !important;
  }

  .nav {
    padding-right: 10px;
  }

  .nav .logo {
    white-space: nowrap;
  }

  /*
   * La navegación por anclas no debe depender del momento en que se active
   * IntersectionObserver. En móvil y tableta priorizamos contenido inmediato.
   */
  .reveal,
  .reveal.show {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 600px) {
  html {
    scroll-padding-top: 82px;
  }

  body {
    font-size: 16px;
    line-height: 1.55;
    background-size: 300px 300px;
    background-attachment: scroll;
  }

  .ambient,
  .hero > .deco,
  .deco-mask {
    display: none !important;
  }

  /* Navegación: una sola fila clara y táctil. */
  .nav,
  .nav.scrolled {
    top: 9px;
    width: calc(100% - 20px);
    min-height: 58px;
    padding: 8px 9px 8px 14px;
    border-radius: 22px;
  }

  .nav .logo {
    gap: 8px;
    font-size: 17px;
  }

  .nav .logo .crown {
    width: 28px !important;
    height: 28px !important;
  }

  .nav .burger {
    display: inline-flex;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
  }

  .drawer {
    padding: 78px 22px 24px;
    overflow-y: auto;
  }

  .drawer a {
    padding: 13px 0;
    font-size: 24px;
  }

  /* Portada: conserva el castillo y la identidad, con menor densidad. */
  .hero {
    min-height: auto;
    padding: 96px 18px 42px;
    gap: 28px;
  }

  .hero-eyebrow {
    max-width: 100%;
    margin-bottom: 17px;
    padding: 6px 12px 6px 7px;
    gap: 7px;
    font-size: 10.5px;
    line-height: 1.3;
    letter-spacing: 0.055em;
  }

  .hero h1 {
    font-size: clamp(40px, 12vw, 50px);
    line-height: 0.98;
    margin-bottom: 19px;
  }

  .hero h1 .underline-wave::after {
    bottom: -6px;
    height: 10px;
  }

  .hero p.lead {
    max-width: 36ch;
    margin-bottom: 24px;
    font-size: 16.5px;
    line-height: 1.55;
  }

  .hero-ctas {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .hero-ctas .btn {
    width: 100%;
    min-height: 52px;
    padding: 11px 18px;
    justify-content: center;
  }

  .hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px dashed rgba(75, 69, 145, 0.18);
  }

  .hero-stats .stat .n {
    font-size: 28px;
  }

  .hero-stats .stat .l {
    font-size: 9px;
    line-height: 1.25;
    letter-spacing: 0.025em;
  }

  .hero-visual {
    max-width: 300px;
    aspect-ratio: 1 / 1;
    margin-top: -4px;
  }

  .castle-card {
    inset: 5%;
    border-radius: 38% 38% 24px 24px / 33% 33% 24px 24px;
  }

  .hero-badge {
    padding: 10px 12px;
    border-radius: 17px;
    gap: 8px;
  }

  .hero-badge .ic {
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }

  .hero-badge .t {
    font-size: 16px;
  }

  .hero-badge .s {
    font-size: 9px;
  }

  .hero-badge.b1 {
    top: 3%;
    left: -3%;
  }

  .hero-badge.b2,
  .hero-badge.b3 {
    display: none;
  }

  /* Ritmo vertical general. */
  section.kk-section {
    padding: 62px 18px;
  }

  .kk-h2 {
    max-width: 20ch;
    margin: 13px 0 12px;
    font-size: clamp(31px, 9.5vw, 38px);
    line-height: 1.04;
  }

  .kk-sub {
    font-size: 16px;
    line-height: 1.55;
  }

  .kk-eyebrow {
    padding: 5px 11px;
    font-size: 10.5px;
    letter-spacing: 0.09em;
  }

  .wave-divider {
    height: 42px;
  }

  .ticker {
    padding: 14px 0;
  }

  .ticker-track {
    gap: 36px;
    font-size: 23px;
  }

  .ticker-track span {
    gap: 36px;
  }

  /* Presentación institucional. */
  .about-grid {
    gap: 28px;
  }

  .about-img-wrap {
    aspect-ratio: 4 / 3;
    border-radius: 22px;
  }

  .about-img-wrap .corner-badge {
    left: 12px;
    bottom: 12px;
    padding: 10px 13px;
    border-radius: 14px;
    font-size: 18px;
  }

  .about-features {
    margin-top: 20px;
    gap: 10px;
  }

  .about-feature {
    padding: 12px 13px;
    border-radius: 15px;
  }

  .about-feature p {
    font-size: 13.5px;
  }

  /* Galería: una imagen principal; el gesto lateral mantiene las 13 fotos. */
  .carousel-head {
    display: grid;
    gap: 14px;
    margin-bottom: 22px;
  }

  .carousel-head > div:first-child {
    min-width: 0;
  }

  .carousel-counter .num {
    font-size: 38px;
  }

  .carousel-counter .sep {
    font-size: 22px;
  }

  .carousel-counter .tot {
    font-size: 19px;
  }

  .slide-main {
    aspect-ratio: 4 / 3;
    border-radius: 22px;
  }

  .slide-info {
    left: 17px;
    right: 17px;
    bottom: 16px;
  }

  .slide-tag {
    margin-bottom: 7px;
    padding: 4px 10px;
    font-size: 9px;
  }

  .slide-info h3 {
    font-size: 26px;
  }

  .slide-info p {
    display: none;
  }

  .carousel-strip {
    display: none;
  }

  .carousel-progress {
    margin-top: 12px;
  }

  /*
   * Colecciones extensas: se convierten en carruseles táctiles. El contenido
   * sigue completo y accesible; deja de ocupar cinco pantallas verticales.
   */
  .grupos-grid,
  .modelo-grid,
  .np-grid {
    display: flex;
    gap: 14px;
    width: calc(100% + 36px);
    margin-inline: -18px;
    padding: 8px 18px 20px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 18px;
    scrollbar-width: none;
  }

  .grupos-grid::-webkit-scrollbar,
  .modelo-grid::-webkit-scrollbar,
  .np-grid::-webkit-scrollbar,
  .timeline::-webkit-scrollbar,
  .cert-grid::-webkit-scrollbar,
  .tabs::-webkit-scrollbar {
    display: none;
  }

  .grupo,
  .pilar,
  .np-card {
    flex: 0 0 min(82vw, 320px);
    scroll-snap-align: center;
  }

  .grupo {
    padding: 20px 16px 23px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(75, 69, 145, 0.08);
    border-radius: 24px;
    box-shadow: 0 16px 34px -28px rgba(75, 69, 145, 0.45);
  }

  .grupo-illo {
    width: 92px;
    height: 92px;
    margin-bottom: 8px;
  }

  .grupo-desc {
    margin-bottom: 16px;
  }

  .grupos-wrap {
    margin-top: 12px;
    padding-top: 12px;
  }

  .grupos-squiggle {
    margin-bottom: 14px;
  }

  /* Modelo: pestañas horizontales y panel más compacto. */
  .modelo {
    padding: 18px 0 !important;
  }

  .modelo-header {
    margin-bottom: 30px;
  }

  .approach {
    gap: 16px;
  }

  .tabs {
    flex-direction: row;
    gap: 8px;
    width: calc(100% + 36px);
    margin-inline: -18px;
    padding: 4px 18px 13px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .tab-btn {
    flex: 0 0 auto;
    min-width: 198px;
    padding: 11px 13px;
    border-left: 0;
    border-bottom: 3px solid transparent;
    border-radius: 14px;
    font-size: 14px;
    scroll-snap-align: start;
  }

  .tab-btn.active {
    border-left-color: transparent;
    border-bottom-color: var(--kk-red);
  }

  .tab-btn .ic {
    width: 32px;
    height: 32px;
  }

  .tab-panel {
    min-height: 0;
    padding: 24px 20px;
    border-radius: 22px;
  }

  .tab-panel h3 {
    padding-right: 34px;
    font-size: 27px;
  }

  .tab-panel .body {
    font-size: 14.5px;
  }

  .pilar {
    min-height: 245px;
    padding: 24px;
  }

  /* Neuropsicología: una tarjeta por gesto, animación estática y legible. */
  .np-section {
    padding-top: 62px;
    padding-bottom: 62px;
  }

  .np-head {
    margin-bottom: 28px;
  }

  .np-quote {
    margin-top: 24px;
  }

  .np-illo-wrap {
    aspect-ratio: 5 / 3;
  }

  .np-body {
    padding: 18px 19px 22px;
  }

  .np-body h3 {
    font-size: 24px;
  }

  .np-body p {
    margin-bottom: 15px;
    font-size: 14px;
  }

  /* Rutina: tarjetas horizontales en lugar de diez filas largas. */
  #dia > div:first-child {
    margin-bottom: 27px !important;
  }

  .timeline {
    display: flex;
    gap: 14px;
    width: calc(100% + 36px);
    max-width: none;
    margin-inline: -18px;
    padding: 8px 18px 22px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 18px;
    scrollbar-width: none;
  }

  .timeline-line {
    display: none;
  }

  .t-row {
    display: flex;
    flex: 0 0 min(82vw, 320px);
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin: 0;
    scroll-snap-align: center;
  }

  .t-row.l .t-card,
  .t-row.r .t-card {
    grid-column: auto;
    text-align: left;
  }

  .t-row .t-card .t-ic {
    margin-left: 0;
  }

  .t-card {
    flex: 1;
    min-height: 205px;
    padding: 20px;
  }

  .t-time {
    order: -1;
    align-self: flex-start;
    width: auto;
    height: 38px;
    padding-inline: 14px;
    border-radius: 999px;
    font-size: 14px;
    box-shadow: 0 8px 18px -12px rgba(0, 0, 0, 0.35);
  }

  /* Testimonios y preguntas. */
  .testi-wrap {
    padding: 38px 21px;
  }

  .testi-head {
    margin-bottom: 20px;
  }

  .testi-text {
    margin-bottom: 22px;
    font-size: 21px;
  }

  .testi-nav {
    gap: 10px;
    margin-top: 25px;
  }

  .t-arr {
    width: 42px;
    height: 42px;
  }

  .t-dots {
    gap: 5px;
  }

  .t-dot {
    width: 8px;
    height: 8px;
  }

  .t-dot.on {
    width: 20px;
  }

  .faq-grid {
    gap: 23px;
  }

  .faq-q {
    padding: 17px 18px;
    font-size: 17px;
  }

  .faq-a p {
    padding: 0 18px 18px;
    font-size: 14px;
  }

  /* Certificaciones: todas disponibles mediante desplazamiento táctil. */
  .cert-wrap {
    padding: 35px 20px;
  }

  .cert-head {
    margin-bottom: 25px;
  }

  .cert-grid {
    display: flex;
    gap: 12px;
    width: calc(100% + 20px);
    margin-right: -20px;
    padding: 4px 20px 16px 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .cert-card {
    flex: 0 0 min(76vw, 280px);
    min-height: 150px;
    padding: 18px;
    scroll-snap-align: start;
  }

  .cert-foot {
    align-items: flex-start;
    margin-top: 20px;
    padding: 17px;
  }

  .cert-foot-ic {
    width: 42px;
    height: 42px;
  }

  .cert-foot p {
    font-size: 13.5px;
  }

  /* Contacto y pie: cómodos sin perder información. */
  .admisiones-wrap {
    padding: 40px 18px;
    border-radius: 26px;
  }

  .admisiones-grid {
    gap: 28px;
  }

  .admisiones-grid .info h2 {
    font-size: 36px;
  }

  .admisiones-grid .info p {
    font-size: 15.5px;
  }

  .contact-list {
    margin-top: 22px;
    gap: 11px;
  }

  .contact-item .text strong {
    font-size: 15.5px;
    overflow-wrap: anywhere;
  }

  .form {
    padding: 23px 17px;
    border-radius: 22px;
  }

  .footer {
    padding: 58px 18px 26px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px 20px;
  }

  .footer-grid > div:first-child {
    grid-column: 1 / -1;
  }

  .footer-grid > div:last-child {
    grid-column: 1 / -1;
  }

  .footer .copy {
    margin-top: 34px;
  }

  /* Menos trabajo gráfico en dispositivos táctiles de menor potencia. */
  .castle-stars span,
  .np-illo *,
  .slide-main img,
  .hero-badge {
    animation: none !important;
  }

}

@media (max-width: 380px) {
  .hero h1 {
    font-size: 40px;
  }

  .hero-stats .stat .n {
    font-size: 25px;
  }

  .hero-stats .stat .l {
    font-size: 8.5px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid > div {
    grid-column: 1 / -1;
  }
}

@media (hover: none) and (pointer: coarse) {
  .grupo:hover,
  .pilar:hover,
  .np-card:hover,
  .cert-card:hover,
  .t-card:hover {
    transform: none !important;
  }
}