/* ==========================================================================
   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; }
.np-portada .botonera { margin-top: 2rem; }

/* Mientras la app no está publicada no se usa el distintivo oficial de Apple
   ("Descargalo en el App Store"): sus reglas lo permiten solo con la app ya
   disponible. El día que salga, esto se cambia por el distintivo con el
   enlace a la ficha. */
.np-pronto {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.8em 1.35em;
  border-radius: 100px;
  background: var(--tinta);
  color: var(--fondo);
  font-size: var(--t-chico);
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.np-pronto::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #30d158;
  box-shadow: 0 0 0 3px rgba(48, 209, 88, 0.25);
}

/* 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; }
.np-ayuda .botonera { justify-content: center; }

.np-ayuda .boton--claro {
  background: var(--tinta-inv);
  border-color: var(--tinta-inv);
  color: var(--tinta);
}

.np-ayuda .boton--claro:hover { background: var(--blanco); }

.np-ayuda__correo {
  margin-top: 1.5rem;
  font-size: var(--t-chico);
  color: var(--tinta-inv-suave);
}

/* --- 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; }
  .np-ventajas { grid-template-columns: 1fr; gap: 1.75rem; }
  .np-pasos { grid-template-columns: 1fr; }
  .np-resumen { flex-direction: column; }
}