/* ==========================================================================
   NV Group — nvprint.css
   Las dos páginas de la app NV Print: la ficha con el soporte (/nvprint) y su
   política de privacidad (/nvprint-privacidad). Se carga DESPUÉS de los tres
   CSS del sitio y usa sus mismas variables: si cambia la paleta del sitio,
   estas páginas la siguen solas.

   Son las direcciones que figuran en la ficha del App Store. Apple las abre
   al revisar la app, así que tienen que andar bien también en el iPhone.
   ========================================================================== */

/* --- Portada de la app ----------------------------------------------------- */

.np-portada {
  /* Deja pasar la cápsula fija de arriba, como en el aviso legal. */
  padding-top: calc(84px + clamp(2.5rem, 7vh, 4.5rem));
  padding-bottom: clamp(3.5rem, 9vh, 6rem);
}

.np-portada__grilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

/* El ícono de la app, con la curva de las esquinas de los íconos de iPhone. */
.np-icono {
  width: 88px;
  height: 88px;
  border-radius: 22.5%;
  box-shadow: 0 12px 30px rgba(17, 17, 20, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.05);
  margin-bottom: 1.75rem;
}

.np-portada h1 { margin-bottom: 1.25rem; }
.np-portada .guia { max-width: 31rem; }

/* --- Descarga ----------------------------------------------------------------
   El botón para bajar la app, con el vidrio de iOS 26/27: translúcido sobre un
   resplandor de color que se mueve despacio, con un filo de luz arriba y un
   reflejo que sigue al puntero (js/nvprint.js). No lleva la manzana: Apple la
   reserva para su distintivo oficial; acá va el ícono de la app.
   -------------------------------------------------------------------------- */

.np-descargas { margin-top: 2.25rem; }

.np-descargas__mas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin-top: 1.4rem;
}

.np-descarga-zona {
  position: relative;
  isolation: isolate;
  display: inline-block;
}

/* El color que se ve a través del vidrio (va detrás del botón, para que su
   backdrop-filter lo desenfoque). */
.np-descarga-zona::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -20% -6%;
  border-radius: 100px;
  background:
    radial-gradient(36% 75% at 10% 55%, rgba(0, 113, 227, 0.55), transparent 72%),
    radial-gradient(30% 70% at 47% 28%, rgba(48, 209, 88, 0.42), transparent 72%),
    radial-gradient(36% 80% at 88% 64%, rgba(191, 90, 242, 0.45), transparent 72%);
  filter: blur(16px);
  animation: np-aurora 10s ease-in-out infinite alternate;
}

@keyframes np-aurora {
  0%   { transform: translateX(-4%) scale(1);    opacity: 0.8; }
  50%  { transform: translateX(3%)  scale(1.05); opacity: 1; }
  100% { transform: translateX(-1%) scale(0.98); opacity: 0.85; }
}

.np-descarga {
  --mx: 28%;
  --my: -10%;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 9px 10px 9px 9px;
  border-radius: 100px;
  color: var(--tinta);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0.32));
  -webkit-backdrop-filter: blur(20px) saturate(200%);
  backdrop-filter: blur(20px) saturate(200%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),          /* filo de luz arriba */
    inset 0 0 0 1px rgba(255, 255, 255, 0.6),         /* canto del vidrio */
    inset 0 -10px 18px -12px rgba(255, 255, 255, 0.8), /* luz que rebota abajo */
    0 1px 1px rgba(17, 17, 20, 0.05),
    0 14px 34px -10px rgba(17, 17, 20, 0.25);
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s var(--curva);
  -webkit-tap-highlight-color: transparent;
}

/* El reflejo: una luz blanda donde está el puntero. */
.np-descarga::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(130px circle at var(--mx) var(--my),
              rgba(255, 255, 255, 0.85), transparent 70%);
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 0.3s var(--curva);
}

.np-descarga > * { position: relative; z-index: 1; }

.np-descarga:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(255, 255, 255, 0.7),
    inset 0 -10px 18px -12px rgba(255, 255, 255, 0.9),
    0 1px 1px rgba(17, 17, 20, 0.05),
    0 20px 40px -12px rgba(17, 17, 20, 0.3);
}

.np-descarga:hover::after { opacity: 1; }

/* Al apretar se hunde, y al soltar vuelve con un rebote. */
.np-descarga:active {
  transform: scale(0.96);
  transition-duration: 0.12s;
}

.np-descarga:focus-visible {
  outline: 3px solid rgba(0, 113, 227, 0.45);
  outline-offset: 3px;
}

.np-descarga__icono {
  width: 46px;
  height: 46px;
  border-radius: 22.5%;
  box-shadow: 0 4px 12px rgba(17, 17, 20, 0.18), 0 0 0 0.5px rgba(0, 0, 0, 0.08);
}

.np-descarga__texto {
  display: grid;
  gap: 2px;
  padding-right: 8px;
}

.np-descarga__accion {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.np-descarga__detalle {
  font-size: var(--t-micro);
  color: var(--tinta-suave);
  line-height: 1.3;
}

/* La gota azul con la flecha, como el botón "Obtener" del App Store. */
.np-descarga__flecha {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(180deg, #3d95ff, var(--acento-vivo));
  color: var(--blanco);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5),
              0 6px 14px -4px rgba(0, 113, 227, 0.55);
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.np-descarga__flecha svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.np-descarga:hover .np-descarga__flecha { transform: translateY(2px); }

/* La impresora flota apenas, como en la bienvenida de la app. */
.np-foto {
  position: relative;
  isolation: isolate;
  margin: 0;
}

.np-foto img {
  width: 100%;
  max-width: 520px;
  height: auto;
  margin-inline: auto;
  animation: np-flotar 6s ease-in-out infinite;
}

/* La sombra en el piso: se achica cuando la impresora sube. */
.np-foto::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 20%;
  right: 20%;
  bottom: -5%;
  height: 10%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.16);
  filter: blur(14px);
  animation: np-sombra 6s ease-in-out infinite;
}

@keyframes np-flotar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

@keyframes np-sombra {
  0%, 100% { transform: scaleX(1);    opacity: 1; }
  50%      { transform: scaleX(0.88); opacity: 0.7; }
}

/* --- Qué hace --------------------------------------------------------------- */

.np-app__grilla {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(3rem, 7vw, 6rem);
  align-items: center;
}

/* Un iPhone dibujado alrededor de la captura de la app. La isla se calcula
   sobre el ancho del teléfono para que no se deforme en pantallas chicas. */
.np-telefono {
  --ancho: min(290px, 72vw);
  --pantalla: calc(var(--ancho) - 22px);
  position: relative;
  width: var(--ancho);
  margin: 0 auto;
  padding: 11px;
  border-radius: calc(var(--ancho) * 0.18);
  background: #1d1d1f;
  box-shadow: inset 0 0 0 1.5px #3a3a3c,
              0 34px 70px rgba(17, 17, 20, 0.22),
              0 10px 22px rgba(17, 17, 20, 0.12);
}

.np-telefono img {
  width: 100%;
  height: auto;
  border-radius: calc(var(--ancho) * 0.18 - 11px);
}

.np-telefono::before {
  content: "";
  position: absolute;
  top: calc(11px + var(--pantalla) * 0.027);
  left: 50%;
  width: calc(var(--pantalla) * 0.31);
  height: calc(var(--pantalla) * 0.092);
  transform: translateX(-50%);
  border-radius: 100px;
  background: #000;
}

.np-app__texto h2 { margin-bottom: 1.25rem; }

.np-ventajas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.25rem 2.5rem;
  margin-top: clamp(2.25rem, 5vh, 3.25rem);
}

/* El mismo cuadradito negro con el ícono blanco que usan los botones de la app. */
.np-ventaja__icono {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--tinta);
  color: var(--blanco);
  margin-bottom: 1rem;
}

.np-ventaja__icono svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.np-ventaja h3 {
  font-size: 1.1875rem;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

.np-ventaja p {
  font-size: var(--t-chico);
  line-height: 1.55;
  color: var(--tinta-suave);
}

/* --- Primeros pasos --------------------------------------------------------- */

.np-pasos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  counter-reset: paso;
}

.np-paso {
  padding: 1.5rem 1.4rem 1.65rem;
  border-radius: 18px;
  background: var(--blanco);
  border: 1px solid var(--linea-tenue);
}

.np-paso::before {
  counter-increment: paso;
  content: counter(paso);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--tinta);
  color: var(--blanco);
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 1.1rem;
}

.np-paso h3 {
  font-size: 1.0625rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin-bottom: 0.5rem;
}

.np-paso p {
  font-size: var(--t-chico);
  line-height: 1.55;
  color: var(--tinta-suave);
}

/* --- Preguntas frecuentes --------------------------------------------------
   Con <details>: se abren y se cierran sin JavaScript, y el buscador del
   navegador (Cmd+F) encuentra el texto aunque la respuesta esté cerrada.
   -------------------------------------------------------------------------- */

.np-preguntas {
  max-width: var(--ancho-texto);
  border-top: 1px solid var(--linea);
}

.np-pregunta { border-bottom: 1px solid var(--linea); }

.np-pregunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.3rem 0;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}

.np-pregunta summary::-webkit-details-marker { display: none; }

/* Un "+" dibujado con dos líneas: al abrir gira y queda como una "×". */
.np-pregunta summary::after {
  content: "";
  flex: none;
  width: 13px;
  height: 13px;
  background:
    linear-gradient(var(--tinta), var(--tinta)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--tinta), var(--tinta)) center / 1.5px 100% no-repeat;
  transition: transform 0.35s var(--curva);
}

.np-pregunta[open] summary::after { transform: rotate(45deg); }

.np-pregunta p {
  max-width: 40rem;
  padding-bottom: 1.4rem;
  line-height: 1.6;
  color: var(--tinta-suave);
}

.np-pregunta p + p { margin-top: -0.5rem; }
.np-pregunta a { color: var(--acento); }
.np-pregunta a:hover { text-decoration: underline; }
.np-pregunta strong { color: var(--tinta); font-weight: 600; }

/* --- Ayuda ------------------------------------------------------------------ */

.np-ayuda { text-align: center; }
.np-ayuda h2 { margin-bottom: 1.25rem; }
.np-ayuda .guia { margin-inline: auto; }
/* Soporte: un círculo blanco con unos auriculares con micrófono, como los
   accesos de contacto de Apple, y abajo qué hace. Círculo y texto son un solo
   enlace; la dirección aparece al pasar el mouse (title), por si alguien no
   tiene un programa de correo configurado. */
.np-soporte {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  margin-top: 2.25rem;
  -webkit-tap-highlight-color: transparent;
}

.np-soporte__circulo {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--blanco);
  color: var(--tinta);
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.06),
              0 12px 30px -10px rgba(0, 0, 0, 0.8);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s var(--curva);
}

.np-soporte:hover .np-soporte__circulo {
  transform: translateY(-2px) scale(1.07);
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.06),
              0 16px 40px -12px rgba(255, 255, 255, 0.35);
}

/* Al apretar se hunde, y al soltar vuelve con un rebote. */
.np-soporte:active .np-soporte__circulo {
  transform: scale(0.94);
  transition-duration: 0.12s;
}

.np-soporte:focus-visible { outline: none; }

.np-soporte:focus-visible .np-soporte__circulo {
  outline: 3px solid rgba(255, 255, 255, 0.5);
  outline-offset: 4px;
}

.np-soporte__icono {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.np-soporte__texto {
  font-size: var(--t-chico);
  color: var(--blanco);
}

/* --- Pie -------------------------------------------------------------------- */

.np-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
}

.np-pie nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.np-pie a { color: #86868b; transition: color 0.2s; }
.np-pie a:hover { color: #f5f5f7; text-decoration: underline; }

/* --- Política de privacidad -------------------------------------------------
   Las mismas reglas que el aviso legal: página sobria y sin animación.
   -------------------------------------------------------------------------- */

.np-legal { padding-top: calc(84px + clamp(3rem, 8vh, 5rem)); }
.np-legal h2 { font-size: var(--t-sub); margin: 2.5rem 0 0.875rem; }
.np-legal p,
.np-legal li { color: var(--tinta-suave); margin-bottom: 0.875rem; line-height: 1.6; }
.np-legal ul { padding-left: 1.25rem; list-style: disc; }
.np-legal li { margin-bottom: 0.5rem; }
.np-legal strong { color: var(--tinta); }
.np-legal a { color: var(--acento); }
.np-legal a:hover { text-decoration: underline; }
.np-legal .fecha { font-size: var(--t-micro); color: var(--tinta-tenue); margin-bottom: 2.25rem; }

/* El resumen de arriba: lo que la mayoría viene a buscar, sin tener que leer
   la página entera. */
.np-resumen {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  padding: 1.4rem 1.5rem;
  border-radius: 18px;
  background: var(--blanco);
  border: 1px solid var(--linea-tenue);
  margin-bottom: 1rem;
}

.np-resumen img {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 22.5%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.np-resumen p { margin: 0; color: var(--tinta); line-height: 1.55; }

/* --- Pantallas chicas ------------------------------------------------------- */

@media (max-width: 900px) {
  .np-portada__grilla,
  .np-app__grilla { grid-template-columns: 1fr; }

  .np-foto img { max-width: 420px; }
  .np-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .np-icono { width: 72px; height: 72px; margin-bottom: 1.4rem; }
  /* En el celular, el botón de descarga más compacto: con el ancho justo y
     una sola línea abajo. */
  .np-descarga { gap: 11px; padding: 7px 8px 7px 7px; }
  .np-descarga__icono { width: 38px; height: 38px; }
  .np-descarga__accion { font-size: 0.9375rem; }
  .np-descarga__detalle { font-size: 0.75rem; }
  .np-descarga__flecha { width: 34px; height: 34px; }
  .np-descarga__flecha svg { width: 16px; height: 16px; }
  .np-ventajas { grid-template-columns: 1fr; gap: 1.75rem; }
  .np-pasos { grid-template-columns: 1fr; }
  .np-resumen { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .np-descarga-zona::before { animation: none; }
  .np-descarga,
  .np-descarga__flecha,
  .np-soporte__circulo { transition: none; }
}