/* Las páginas de cada módulo (/booking, /access, /academy, /rec, /vision) y /precios. Llevan el mismo menú,
   botones, preguntas, contacto y pie que la home (landing.css y demo.css) y, además: una portada propia, su
   demo con capturas de la app real, lo más destacado, la IA y los otros módulos. Las genera
   scripts/paginas-modulo.py. */

/* Portada */
.mod-portada { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.05fr .95fr; gap: 50px; align-items: center; padding: 140px clamp(16px, 6vw, 96px) 100px; background: radial-gradient(90% 70% at 72% 40%, #0f2350, var(--noche) 70%); color: #fff; }
.mod-portada .hero-txt { max-width: 640px; }
.mod-portada h1 { font-size: clamp(38px, 4.6vw, 66px); line-height: 1.02; margin: 0 0 22px; letter-spacing: -.02em; }
.mod-portada h1 .kicker { display: flex; width: fit-content; margin: 0 0 22px; line-height: 1.4; }
.mod-visual { position: relative; justify-self: stretch; display: flex; justify-content: center; }
.mod-visual .escena-movil { height: min(640px, calc(100vh - 170px)); }
.mod-visual .portatil { width: min(100%, 640px); }
.mod-visual .cap img { opacity: 1; }

/* La demo: pasos con capturas de la app real (el visor de la home) */
.mod-demo { background: var(--claro); padding: 110px clamp(16px, 6vw, 96px); }
.mod-demo + .mod-demo { padding-top: 0; }
.mod-demo-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 64px; align-items: center; max-width: 1180px; margin: 0 auto; }
.mod-demo-grid.con-portatil { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); }
.mod-demo .escena-movil { height: min(700px, calc(100vh - 140px)); }
.mod-demo .portatil { width: 100%; }
.mod-demo-txt h2 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.05; margin: 14px 0 26px; }
.mod-demo-txt .pista-tip { margin-top: 18px; }

/* Lo más destacado */
.mod-destacados { background: var(--papel); padding: 110px clamp(16px, 6vw, 96px); }
.mod-destacados .tiles { grid-template-columns: repeat(3, 1fr); }

/* La IA */
.mod-ia { background: var(--noche); color: #fff; padding: 110px clamp(16px, 6vw, 96px); }
.mod-ia .sec-cab p { color: rgba(255,255,255,.7); }
.ia-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1180px; margin: 0 auto; }
.ia-card { border-radius: 26px; padding: 28px 24px; background: linear-gradient(160deg, rgba(0,83,254,.18), rgba(255,255,255,.04) 60%); border: 1px solid rgba(126,164,255,.18); }
.ia-card b { display: block; font-size: 19px; margin: 16px 0 6px; }
.ia-card span { color: rgba(255,255,255,.72); font-size: 15px; line-height: 1.5; }
.ia-card .tile-ico { background: rgba(215,242,74,.14); color: var(--bola); }
.mod-ia .mas-mod { text-align: center; margin-top: 34px; }
/* La IA con capturas: los pasos de la demo, en oscuro */
.ia-demo { max-width: 1180px; margin: 0 auto; }
.ia-demo .escena-movil { height: min(700px, calc(100vh - 140px)); }
.ia-demo .pasos-app button { color: #fff; }
.ia-demo .pasos-app i { background: rgba(255,255,255,.12); color: #fff; }
.ia-demo .pasos-app small { color: rgba(255,255,255,.72); }
.ia-demo .pasos-app li.on button { background: rgba(255,255,255,.06); border-color: rgba(126,164,255,.22); box-shadow: none; }
.ia-demo .pasos-app li.on i { background: var(--bola); color: var(--noche); }
.ia-demo .pasos-app li.hecho i { background: var(--verde); color: #fff; }
.ia-demo .pista-tip { color: rgba(255,255,255,.6); margin-top: 18px; }

/* Los otros módulos */
.mod-otros { background: var(--claro); padding: 100px clamp(16px, 6vw, 96px) 40px; }
.otros-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; max-width: 1180px; margin: 0 auto; }
.otro { display: grid; gap: 6px; padding: 22px; border-radius: 22px; background: var(--papel); border: 1px solid var(--linea); text-decoration: none; transition: transform .3s, box-shadow .3s; }
.otro:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(13,19,32,.08); }
.otro b { font-size: 18px; }
.otro span { color: var(--gris); font-size: 14.5px; line-height: 1.45; }
.otro em { font-style: normal; color: var(--azul); font-weight: 800; font-size: 14px; margin-top: 4px; }

/* La barra del móvil lleva un enlace (la demo en vídeo está en la home) */
@media (max-width: 760px) {
  .barra-movil a { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 48px; padding: 0 8px; border-radius: 16px; font-weight: 800; font-size: 14px; white-space: nowrap; text-decoration: none; }
}

@media (max-width: 1100px) {
  .mod-portada { grid-template-columns: 1fr; text-align: center; padding-top: 120px; }
  .mod-portada .hero-txt { margin: 0 auto; }
  .mod-portada h1 .kicker { margin-left: auto; margin-right: auto; }
  .mod-portada .hero-txt > p { margin-left: auto; margin-right: auto; }
  .mod-portada .hero-cta { justify-content: center; }
  .mod-demo-grid, .mod-demo-grid.con-portatil { grid-template-columns: 1fr; gap: 36px; }
  .mod-demo .mod-demo-ver, .ia-demo .mod-demo-ver { order: -1; justify-self: center; }
  .mod-demo .escena-movil, .ia-demo .escena-movil { height: min(560px, 70vh); }
  .mod-destacados .tiles, .ia-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .mod-visual { display: none; }
  .mod-portada { padding-bottom: 70px; }
  .mod-destacados .tiles, .ia-grid { grid-template-columns: 1fr; }
  .mod-demo, .mod-destacados, .mod-ia { padding-top: 80px; padding-bottom: 80px; }
}