/* =========================================================
   Escuela Infantil NSD — Detalles de interacción
   ---------------------------------------------------------
   Pulido «de dispositivo» inspirado en Designing Fluid
   Interfaces (WWDC 2018): respuesta al pulsar, hover solo con
   ratón, curvas de muelle, límites suaves, tipografía fina,
   foco visible y movimiento reducido.

   No cambia colores, fuentes, maquetación ni textos: solo
   retoca cómo responde la página. Se carga la última, después
   de todas las hojas del sitio. Solo se animan transform y
   opacity.
   ========================================================= */

/* ---------- Curvas y duraciones ----------
   --ease-fluido: amortiguamiento crítico, sin rebote (casi todo).
   --ease-muelle: rebote leve, solo para lo que el usuario lanza o
   arrastra; nunca para un menú que aparece. */
:root {
  --ease-fluido: cubic-bezier(.22, 1, .36, 1);
  --ease-muelle: linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%, .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.9%, 1);
  --dur-pulsar: 100ms;
  --dur-aparecer: 220ms;
  --dur-panel: 380ms;
}
@supports not (transition-timing-function: linear(0, 1)) {
  :root { --ease-muelle: var(--ease-fluido); }
}

/* ---------- 1. Respuesta inmediata: al pulsar, no al soltar ----------
   Sin el retraso del doble toque en móvil. */
a, button, [role="button"], input, select, textarea, label, summary {
  touch-action: manipulation;
}

/* Los botones con estado de pulsación propio no necesitan el
   destello gris del navegador. */
.hamburger-x, .drawer__close, .drawer__nav a, .grupo-web, .contacto-band__ir,
.rotafotos__pausa, .rotafotos__punto, .pausa-mov, .barra-hoy__pausa, .barra-hoy__agenda,
.act-nsd__enlace, .act-nsd__filtro, .act-nsd__flecha, .act-nsd__punto, .act-nsd-modal__cerrar,
.visor__boton, .faq summary, .perdido__lista a, .volver-arriba {
  -webkit-tap-highlight-color: transparent;
}

/* Vuelta suave al soltar (la bajada es de 100 ms, en :active).
   Se repiten las transiciones que ya tenían para no perderlas. */
.hamburger-x, .drawer__close, .drawer__nav a, .rotafotos__pausa, .pausa-mov, .barra-hoy__agenda {
  transition: transform 250ms var(--ease-fluido);
}
.barra-hoy__pausa { transition: background .2s, transform 250ms var(--ease-fluido); }
.act-nsd__filtro { transition: background .18s, border-color .18s, color .18s, transform 250ms var(--ease-fluido); }
.act-nsd-modal__cerrar { transition: background .18s, transform 250ms var(--ease-fluido); }
.visor__boton { transition: background .2s, opacity .2s, transform 250ms var(--ease-fluido); }

/* ---------- 2. Hover que mueve o eleva: solo con ratón ----------
   En pantallas táctiles el :hover se queda «pegado» tras tocar; ahí
   se anula la elevación y se mantiene el cambio de color. */
@media (hover: none), (pointer: coarse) {
  .btn--primary:hover, .btn--gold:hover, .card:hover, .service:hover,
  .grupo-web:hover, .contacto-band__ir:hover, main .perdido__lista a:hover,
  .act-nsd__enlace:hover {
    transform: none;
  }
  .card:hover { box-shadow: none; border-color: var(--ink-100); }
  .grupo-web:hover { box-shadow: none; }
  .act-nsd__enlace:hover:not(:focus-visible) { box-shadow: none; border-color: var(--border); }
  .act-nsd__enlace:hover .act-nsd__leer { gap: 5px; }
}

/* Estados de pulsación (van después del bloque anterior para ganarle).
   .btn, .card, .service, .step, .topbar__pill y las tarjetas de
   actualidad ya los tienen con muelle real (nsd-spring.js). */
.hamburger-x:active, .drawer__close:active, .rotafotos__pausa:active,
.barra-hoy__pausa:active, .barra-hoy__agenda:active, .act-nsd__filtro:active,
.act-nsd-modal__cerrar:active, .visor__boton:active:not(:disabled), .contacto-band__ir:active {
  transform: scale(.97);
  transition: transform var(--dur-pulsar) ease-out;
}
/* Filas y tarjetas-enlace grandes: escala más sutil */
.grupo-web:active, .drawer__nav a:active, main .perdido__lista a:active {
  transform: scale(.985);
  transition: transform var(--dur-pulsar) ease-out;
}
/* Este botón ya usa transform para centrarse en la cinta */
.cinta .pausa-mov:active {
  transform: translateY(-50%) scale(.97);
  transition: transform var(--dur-pulsar) ease-out;
}
/* El botón de volver arriba lo crea nsd-arriba.js con su propio <style>,
   que llega después: «html» le da la especificidad necesaria. */
html .volver-arriba.is-visible:active {
  transform: scale(.97);
  transition: transform var(--dur-pulsar) ease-out;
}

/* ---------- 5. Cajón móvil: entra y sale por la derecha ----------
   Ya era una transición CSS (interrumpible y simétrica); solo se
   ajusta a la duración de panel con la curva fluida. */
.drawer {
  transition: transform var(--dur-panel) var(--ease-fluido), visibility var(--dur-panel);
}

/* Preguntas frecuentes: la respuesta aparece con un fundido corto,
   también al cerrar. Solo opacidad; donde el navegador no conoce
   ::details-content se abre como siempre. */
@supports selector(::details-content) {
  .faq details::details-content {
    opacity: 0;
    transition: opacity var(--dur-aparecer) var(--ease-fluido), content-visibility var(--dur-aparecer) allow-discrete;
  }
  .faq details[open]::details-content { opacity: 1; }
}

/* ---------- 6. Límites suaves ----------
   El scroll de un cajón, una ventana o un carrusel no se escapa a la
   página de detrás. */
.drawer, .visor, .act-nsd-modal, .act-nsd-modal__caja { overscroll-behavior: contain; }
.act-nsd__pista { overscroll-behavior-x: contain; }
/* «pan-x» bloqueaba el desplazamiento vertical de la página cuando el
   dedo empezaba encima de las tarjetas de actualidad. */
.act-nsd__pista { touch-action: pan-x pan-y; }

/* ---------- 7. Materiales ----------
   La cabecera ya es translúcida; sin backdrop-filter, fondo opaco. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .navbar { background: var(--surface); }
}

/* ---------- 8. Tipografía ---------- */
p, li { text-wrap: pretty; }
body { font-optical-sizing: auto; }
/* Horas, fechas y tablas con cifras de ancho fijo */
.timeline__hora, .tabla, .barra-hoy__fecha, .act-nsd__fecha, time {
  font-variant-numeric: tabular-nums;
}

/* ---------- 9. Foco ----------
   Anillo de 2 px con el ciruela de la escuela, separado 3 px y con el
   mismo radio que el elemento. Sobre fondos oscuros, en ámbar. */
:focus-visible { outline: 2px solid var(--green-600); outline-offset: 3px; }
.topbar :focus-visible, .barra-hoy :focus-visible, .cinta :focus-visible,
.drawer :focus-visible, .stats :focus-visible, .section--dark :focus-visible,
.cta :focus-visible, .footer :focus-visible, .form-card__cabecera :focus-visible {
  outline-color: var(--gold-300);
}
/* Sobre fotos y sobre el velo del visor, blanco con sombra para que se
   vea encima de cualquier imagen. */
.rotafotos :focus-visible, .visor :focus-visible, .act-nsd-modal__cerrar:focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 5px rgba(0, 0, 0, .35);
}
/* Las fotos que abren el visor van dentro de un marco con overflow
   oculto: el anillo se dibuja hacia dentro para que no se recorte. */
.rotafotos .con-lupa:focus-visible { outline-offset: -4px; box-shadow: none; }

/* ---------- 12. Formularios ---------- */
:root { accent-color: var(--green-600); }
input, textarea { caret-color: var(--green-600); }
/* El buscador de actualidad usaba 13 px: en iOS eso hace zoom al
   enfocarlo. En pantallas táctiles, 16 px. */
@media (pointer: coarse), (max-width: 720px) {
  .act-nsd__search input { font-size: 16px; }
}

/* ---------- 13. Zonas seguras ----------
   La barra de llamada del móvil ya suma la zona segura; el botón de
   volver arriba, no. Y cuando la barra está a la vista, el botón sube
   por encima para no tapar «Reservar». */
html .volver-arriba {
  right: calc(20px + env(safe-area-inset-right));
  bottom: calc(20px + env(safe-area-inset-bottom));
}
@media (max-width: 640px) {
  html .volver-arriba {
    right: calc(14px + env(safe-area-inset-right));
    bottom: calc(14px + env(safe-area-inset-bottom));
  }
}
@media (max-width: 720px) {
  html:has(.mobile-cta.is-visible) .volver-arriba.is-visible { transform: translateY(-74px); }
  html:has(.mobile-cta.is-visible) .volver-arriba.is-visible:active { transform: translateY(-74px) scale(.97); }
}

/* ---------- 14. Dianas táctiles ----------
   Botones de solo icono por debajo de 44 px: en pantallas táctiles se
   amplía la zona pulsable con un pseudo-elemento, sin cambiar el
   aspecto. */
@media (pointer: coarse) {
  .rotafotos__pausa, .barra-hoy__pausa, .act-nsd-modal__cerrar, .act-nsd__flecha { position: relative; }
  .rotafotos__pausa::after, .barra-hoy__pausa::after, .act-nsd-modal__cerrar::after, .act-nsd__flecha::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
  /* Opciones del selector de tema: van pegadas, así que solo se
     amplían en vertical. */
  .theme-switch__opt::after {
    content: ""; position: absolute; left: 0; right: 0; top: -9px; bottom: -9px;
  }
}

/* ---------- 15. Selección ---------- */
::selection { background: color-mix(in srgb, var(--green-600) 24%, transparent); color: var(--ink-900); }
.footer ::selection, .section--dark ::selection, .stats ::selection, .cta ::selection,
.drawer ::selection, .topbar ::selection, .barra-hoy ::selection {
  background: color-mix(in srgb, var(--gold-300) 38%, transparent); color: #fff;
}

/* ---------- 10. Movimiento reducido ----------
   Sin desplazamientos ni escalados: lo que aparece lo hace con un
   fundido corto. nsd-base.css ya deja las transiciones en 0 y el
   scroll en «auto»; aquí se devuelve un fundido de 200 ms a lo que
   entra y sale de la pantalla, y se quita la escala de las
   pulsaciones (también la del muelle de nsd-spring.js). */
@media (prefers-reduced-motion: reduce) {
  .drawer {
    transform: none; opacity: 0;
    transition: opacity 200ms linear, visibility 200ms !important;
  }
  .drawer.is-open { opacity: 1; }
  .mobile-cta {
    transform: none; opacity: 0; visibility: hidden;
    transition: opacity 200ms linear, visibility 200ms !important;
  }
  .mobile-cta.is-visible { opacity: 1; visibility: visible; }
  html:has(.mobile-cta.is-visible) .volver-arriba.is-visible { transform: none; }
  html:has(.mobile-cta.is-visible) .volver-arriba.is-visible:active { transform: none; }
  html:has(.mobile-cta.is-visible) .volver-arriba { bottom: calc(88px + env(safe-area-inset-bottom)); }

  .btn, .topbar__pill, .card, .service, .step, .act-nsd__enlace,
  .hamburger-x, .drawer__close, .drawer__nav a, .grupo-web, .contacto-band__ir,
  .rotafotos__pausa, .barra-hoy__pausa, .barra-hoy__agenda, .act-nsd__filtro,
  .act-nsd__flecha, .act-nsd-modal__cerrar, .visor__boton, .perdido__lista a,
  .theme-switch__opt, html .volver-arriba {
    transform: none !important;
  }
  /* La pulsación se sigue notando, con un leve cambio de opacidad */
  .btn:active, .topbar__pill:active, .act-nsd__enlace:active, .hamburger-x:active,
  .drawer__close:active, .drawer__nav a:active, .grupo-web:active, .contacto-band__ir:active,
  .rotafotos__pausa:active, .barra-hoy__pausa:active, .barra-hoy__agenda:active,
  .act-nsd__filtro:active, .act-nsd__flecha:active, .act-nsd-modal__cerrar:active,
  .visor__boton:active, .perdido__lista a:active, .theme-switch__opt:active,
  .pausa-mov:active, html .volver-arriba:active {
    opacity: .8;
  }
}