/* ===========================================================
   CAPA APPLE · crissnowww
   Principios de "Designing Fluid Interfaces" (WWDC) aplicados
   encima de lo que ya hay. No sustituye nada: añade.
   · respuesta al pulsar sin retardo
   · materiales translúcidos con borde de luz y "scroll edge"
   · fila con inercia que encaja sola (scroll-snap proximity)
   · paneles que se cierran arrastrando (book, packs, archivo)
   · visor de foto a pantalla completa (apple.js)
   · menú móvil en una fila que desliza, sin pisar la portada
   · textos pequeños a tamaño legible y en unidades relativas
   · fallbacks: menos transparencia / más contraste / menos movimiento
   =========================================================== */

/* --- Respuesta: sin retardo de toque en nada pulsable --- */
button, a, .pol, .elem { touch-action: manipulation; }
/* La fila de actores: horizontal nativo Y vertical nativo. Antes solo
   horizontal, y apoyar el dedo en un cartel bloqueaba el scroll de la página. */
.nf-top-tile { touch-action: pan-x pan-y; }
.nav-pills .nav-pill { touch-action: pan-x pan-y; }

/* --- Materiales: el borde superior "coge la luz" --- */
.btn-ghost,
.ovl-close,
.hero-now,
.nf-arrow { box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }

/* --- Barra superior: en vez de una raya de 1px, un borde que se difumina --- */
.top-nav.solid { border-bottom-color: transparent; }
.top-nav.solid::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px;
  background: linear-gradient(rgba(11,11,12,.55), rgba(11,11,12,0));
  pointer-events: none;
}

/* --- Fila Top: inercia nativa + encaje suave al parar --- */
.nf-row-scroller { scroll-snap-type: x proximity; scroll-padding-inline: 4vw; }
.nf-top-tile { scroll-snap-align: start; }

/* --- Textos pequeños: mínimo 11px y en rem (siguen el tamaño de letra del usuario) --- */
.nav-pill, .hero-now, .section-sub, .tile-name, .foot-hint, .legal-line, .repre-link,
.mac-url, .exp-tag, .exp-open, .exp-note, .arch-sub, .pricing-note, .pack .price-note,
.packs-comun, .reserva-cond h4, .mini-note, .reward-note { font-size: .6875rem; }
.pol .pname { font-size: .65rem; }

/* --- Paneles que se cierran arrastrando (ver apple.js) --- */
#book { touch-action: pan-x; will-change: transform; }
.ovl.ap-sheet { border-radius: 26px 26px 0 0; }
#book.ap-sheet { overflow: hidden; }          /* packs y archivo hacen scroll: su overflow no se toca */
.ovl.ap-sheet > :not(.ovl-close) { transition: none; }
#book .gallery img { -webkit-user-drag: none; user-select: none; cursor: zoom-in; }
/* Asa discreta: dice "esto se arrastra" sin explicarlo */
#book::before, #pricing::before, #archive::before {
  content: ""; position: absolute; top: max(10px, env(safe-area-inset-top, 10px)); left: 50%;
  width: 40px; height: 5px; margin-left: -20px; border-radius: 3px;
  background: rgba(255,255,255,.22); z-index: 21; pointer-events: none;
}
/* Zona del asa desde la que siempre se puede tirar (packs y archivo hacen scroll).
   Pequeña a propósito: fuera de ella, el dedo hace scroll normal. */
.ap-grab { position: absolute; top: 0; left: 50%; width: 140px; margin-left: -70px; height: 44px; z-index: 19; touch-action: none; }
@media (hover: hover) and (pointer: fine) {
  #book::before, #pricing::before, #archive::before, .ap-grab { display: none; }
}

/* --- Visor de foto a pantalla completa --- */
#apViewer {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(5,5,6,.97);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 220ms var(--ease-out, ease), visibility 0s linear 220ms;
  touch-action: pan-x;
}
#apViewer.open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 260ms var(--ease-out, ease), visibility 0s; }
#apViewer.ap-dragging { transition: none; }
#apViewer[hidden] { display: none; }
.ap-track {
  position: absolute; inset: 0; display: flex;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain;
  touch-action: pan-x;
}
.ap-track::-webkit-scrollbar { display: none; }
.ap-slide {
  flex: 0 0 100%; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  scroll-snap-align: center; scroll-snap-stop: always;
  padding: max(16px, env(safe-area-inset-top, 16px)) 0 max(44px, env(safe-area-inset-bottom, 44px));
}
.ap-slide img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; border-radius: 6px;
  user-select: none; -webkit-user-drag: none; touch-action: pan-x;
  transform-origin: center; will-change: transform;
}
#apViewer.ap-zoomed .ap-track { overflow: hidden; }
#apViewer.ap-zoomed .ap-slide img { touch-action: none; cursor: grab; }
.ap-x {
  position: absolute; top: max(18px, env(safe-area-inset-top, 18px)); right: 18px;
  width: 42px; height: 42px; border-radius: 50%; border: none; z-index: 5;
  background: rgba(255,255,255,.1); color: #fff; font-size: 17px; cursor: pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  transition: background-color 180ms ease, transform 140ms var(--ease-out, ease);
}
@media (hover: hover) and (pointer: fine) { .ap-x:hover { background: rgba(255,255,255,.2); } }
.ap-x:active { transform: scale(.9); }
.ap-n {
  position: absolute; left: 0; right: 0; bottom: max(14px, env(safe-area-inset-bottom, 14px));
  text-align: center; font-family: var(--mono, monospace); font-size: .6875rem; letter-spacing: .25em;
  color: rgba(255,255,255,.6); pointer-events: none;
}

/* --- Menú en móvil: una fila que desliza, con los destinos que venden primero --- */
@media (max-width: 768px) {
  .nav-pills {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x proximity; padding-bottom: 2px;
    -webkit-mask-image: none; mask-image: none;
  }
  .nav-pills.ap-more-r {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
  }
  .nav-pills.ap-more-l:not(.ap-more-r) {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px);
    mask-image: linear-gradient(90deg, transparent, #000 32px);
  }
  .nav-pills.ap-more-l.ap-more-r {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 40px), transparent);
  }
  .nav-pill { flex: 0 0 auto; scroll-snap-align: start; font-size: .6875rem; letter-spacing: .08em; padding: 9px 12px; }
  .nav-pill { order: 3; }
  .nav-pill:first-child { order: 0; }                 /* Inicio */
  .nav-pill.nav-pill-destacada { order: 1; }          /* Webs de actor (la que más buscan) */
  .nav-pill[onclick*="openPricing"] { order: 2; }     /* Books & Precios */
  /* La pastilla "En portada" no debe pisar la marca SW de la esquina */
  .hero-now { font-size: .625rem; letter-spacing: .14em; padding: 8px 13px; max-width: calc(100% - 96px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* La portada empieza justo debajo del menú real, mida lo que mida (lo calcula apple.js) */
  .hero-wrap { padding-top: calc(var(--ap-nav-h, 118px) + 8px); }
}

/* --- Accesibilidad: menos transparencia → superficies casi sólidas --- */
@media (prefers-reduced-transparency: reduce) {
  .top-nav.solid { background: rgba(11,11,12,.98); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .ovl.open { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(11,11,12,.995); }
  .btn-ghost { background: rgba(255,255,255,.22); backdrop-filter: none; }
  .nf-arrow, .hero-now, #ekSound, .ap-x { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(11,11,12,.96); }
}
/* --- Más contraste → bordes definidos --- */
@media (prefers-contrast: more) {
  .top-nav.solid { border-bottom: 1px solid rgba(255,255,255,.35); }
  .top-nav.solid::after { display: none; }
  .btn-ghost, .ovl-close, .nav-pill, .cbtn, .nf-arrow, .ap-x { border: 1px solid rgba(255,255,255,.45); }
  .tile-name { opacity: 1; background: rgba(0,0,0,.85); }
  .ap-n { color: #fff; }
}
/* --- Menos movimiento: los paneles y el visor se cierran con fundido, sin deslizar --- */
@media (prefers-reduced-motion: reduce) {
  .ovl.ap-sheet { border-radius: 0; }
}

/* ===========================================================
   EFECTO GUAU · tres piezas más (12-oct-2026)
   =========================================================== */

/* --- Si llegamos desde otra página con transición, el cartel de carga sobra --- */
.ap-vt .loader { display: none; }

/* --- Portada que se aleja al bajar, también en móvil.
       La mueve el propio sistema (scroll-driven), sin JS ni tirones.
       En escritorio lo sigue haciendo inmersion.js, por eso aquí solo móvil. --- */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and ((hover: none) or (pointer: coarse) or (max-width: 899px)) {
    .hero-content { animation: ap-hero-content linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    .hero-media   { animation: ap-hero-media   linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    .hero         { animation: ap-hero-card    linear both; animation-timeline: scroll(root); animation-range: 0 90vh; transform-origin: center top; }
  }
}
@keyframes ap-hero-content { to { transform: translate3d(0, 26vh, 0); opacity: 0; } }
@keyframes ap-hero-media   { to { transform: translate3d(0, 10vh, 0) scale(1.06); } }
@keyframes ap-hero-card    { to { transform: scale(.96); opacity: .55; } }

/* --- Fila de actores tipo Dock (solo ratón, ver apple.js).
       Los carteles crecen hacia arriba: la fila deja hueco por arriba sin mover nada. --- */
@media (hover: hover) and (pointer: fine) {
  .nf-row-scroller { padding-top: calc(1rem + 64px); margin-top: -64px; }
  .nf-top-tile { transform-origin: center bottom; }
  .nf-top-tile.ap-dock { animation: none; opacity: 1; will-change: transform; }
}