/* EchoFather Familias · capítulo «La app» */
.app-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) auto minmax(220px, .62fr);
  grid-template-areas: "copy stage feat";
  gap: clamp(28px, 3.4vw, 58px);
  align-items: center;
}

/* Texto */
.app-copy { grid-area: copy; min-width: 0; }
.app-copy h2 { margin-bottom: 22px; }
.app-copy .lead { max-width: 500px; }
.app-copy .muted { margin-top: 14px; font-size: 14px; line-height: 1.7; max-width: 470px; }
.app-privacy { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 9px; max-width: 500px; }
.app-privacy li { position: relative; padding-left: 22px; font-size: 12px; line-height: 1.6; color: #b4cac5; }
.app-privacy li b { color: var(--paper); font-weight: 600; }
.app-privacy li::before {
  content: ''; position: absolute; left: 3px; top: .6em; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 4px #dfbd7614;
}
.app-status {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 8px 14px;
  border: 1px solid #dfbd7640; border-radius: 999px; background: #dfbd760d;
  font-size: 10px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--gold);
}
.app-copy .actions { margin-top: 20px; }

/* Vídeo: tarjeta vertical de cristal (el vídeo ya trae sus propios teléfonos) */
.app-stage { grid-area: stage; margin: 0; position: relative; justify-self: center; }
.app-reel {
  position: relative; height: clamp(420px, 61vh, 590px); aspect-ratio: 9 / 16; max-width: 100%;
  border-radius: 28px; overflow: hidden; isolation: isolate; background: #efe9da;
  box-shadow: 0 0 0 7px #ffffff0f, 0 0 0 8px #dfbd7638, 0 42px 90px #000a, 0 0 140px #dfbd7624;
}
.app-reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.app-reel::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: linear-gradient(128deg, #ffffff30 0%, #ffffff00 26%, #ffffff00 72%, #ffffff14 100%);
  box-shadow: inset 0 1px 0 #ffffffa0, inset 0 0 0 1px #ffffff38;
}
.app-controls { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 8px; z-index: 3; }
.app-controls .circle-btn {
  width: 38px; height: 38px; color: var(--paper); border-color: #ffffff40;
  background: #061c24a8; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.app-controls .circle-btn:hover { background: #0b303bd0; }
.app-controls svg { display: block; }
.i-pause, .i-sound { display: none !important; }
#app.is-playing .i-play, #app.has-sound .i-muted { display: none !important; }
#app.is-playing .i-pause, #app.has-sound .i-sound { display: block !important; }
.app-progress { position: absolute; left: 16px; right: 112px; bottom: 30px; height: 3px; border-radius: 3px; background: #061c2438; overflow: hidden; z-index: 3; }
.app-progress i { display: block; height: 100%; background: var(--gold); transform-origin: left; transform: scaleX(0); }

/* El aviso va debajo, sobre fondo oscuro: tiene que leerse siempre */
.app-note.floating-note {
  position: relative; left: auto; right: auto; top: auto; bottom: auto; transform: none;
  margin: 18px auto 0; width: fit-content; max-width: 100%;
  background: var(--glass-light, none), #0b2b35e6;
}
.app-note .mini-icon { font-family: var(--sans); font-size: 18px; }
.app-note span:last-child { color: #c6d6d2; }

/* Partes de la demo */
.app-features { grid-area: feat; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.app-feature {
  position: relative; display: flex; gap: 14px; align-items: flex-start; text-align: left; width: 100%;
  padding: 15px 16px 17px; border-radius: 14px; overflow: hidden; cursor: pointer; color: var(--paper);
  border: 1px solid #ffffff1c;
  background: linear-gradient(145deg, #ffffff0f, #ffffff03), #0b2b3566;
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  transition: border-color .3s, background .3s, box-shadow .3s, transform .45s cubic-bezier(.3, 1.6, .5, 1);
}
.app-feature:hover { border-color: #dfbd7655; transform: translateX(-3px); }
.app-feature:active { transform: scale(.98); }
.app-feature:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.app-feature.is-current {
  border-color: #dfbd7695;
  background: linear-gradient(145deg, #dfbd7624, #dfbd7608), #0b2b358f;
  box-shadow: 0 0 0 1px #dfbd7630, 0 14px 40px #0004;
}
.app-num { font-size: 10px; color: var(--gold); padding-top: 5px; font-variant-numeric: tabular-nums; }
.app-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.app-txt b { font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.1; letter-spacing: -.02em; }
.app-txt small { font-size: 11px; line-height: 1.5; color: #a9bfba; }
.app-feature > i {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; opacity: 0;
  background: linear-gradient(90deg, var(--gold), var(--bright));
  transform-origin: left; transform: scaleX(var(--p, 0)); transition: opacity .3s;
}
.app-feature.is-current > i { opacity: 1; }

/* Mapa de capítulos: ahora son nueve, en cuadrícula de 3 */
.map-grid { grid-template-columns: repeat(3, 1fr); }
.map-card:nth-child(8) > img { object-fit: cover; }
.map-card:nth-child(9) > img { object-fit: contain; }
.map-card:nth-child(6) > img { object-position: 50% 30%; }

/* El menú con nueve enlaces en pantallas medianas */
@media (min-width: 981px) and (max-width: 1280px) { .header nav a { padding-left: 9px; padding-right: 9px; } }

/* Portátil */
@media (max-width: 1180px) {
  .app-layout { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "copy stage" "feat stage"; row-gap: 22px; align-items: start; }
  .app-copy { align-self: end; }
  .app-features { flex-direction: row; flex-wrap: wrap; gap: 8px; align-self: start; }
  .app-feature { width: auto; padding: 10px 14px 12px; border-radius: 999px; gap: 10px; }
  .app-feature:hover { transform: translateY(-2px); }
  .app-num { padding-top: 2px; }
  .app-txt b { font-size: 16px; }
  .app-txt small { display: none; }
  .app-reel { height: clamp(400px, 58vh, 540px); }
}

/* Móvil */
@media (max-width: 720px) {
  .app-layout { display: flex; flex-direction: column; align-items: stretch; gap: 26px; }
  .app-copy .muted { font-size: 13px; }
  .app-stage { align-self: center; width: min(100%, 330px); }
  .app-reel { height: auto; width: 100%; }
  .app-features {
    /* align-self: stretch → ocupa el ancho de la pantalla y se desliza (con «start» medía 1130 px y no se podía llegar a las últimas) */
    align-self: stretch; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 10px; padding: 4px 2px 10px;
    margin: 0 -24px; padding-left: 24px; padding-right: 24px; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .app-features::-webkit-scrollbar { display: none; }
  .app-feature { flex: 0 0 auto; width: 210px; border-radius: 14px; padding: 13px 14px 15px; scroll-snap-align: start; }
  .app-txt small { display: block; }
  .map-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 380px) { .app-features { margin: 0 -20px; padding-left: 20px; padding-right: 20px; } }

/* Vista sencilla: sin desenfoques ni saltos */
body.simple .app-feature { -webkit-backdrop-filter: none; backdrop-filter: none; background: #0d3038; transform: none; }