/* Profundidad: la landing deja de ser "todo negro plano" y se parece a la app (cabecera oscura que se curva hacia un contenido claro).
   - Zonas "papel" (como el fondo de la app) con la misma curva, donde las tarjetas ganan elevación y contraste.
   - Zonas oscuras con varias luces (no una sola), una marca de agua del logo con parallax y brillos por rincones.
   Se carga la última: sus reglas mandan sobre las de estilos.css y movimiento.css. */

:root { --papel: #f5f3ee; --papel-2: #ece8de; --curva: clamp(26px, 7vw, 96px); }

/* ── Portada: marca de agua del logo y luces en tres rincones ── */
.portada {
  background:
    radial-gradient(45% 55% at 12% 0%, rgb(255 255 255 / 0.05), transparent 70%),
    radial-gradient(55% 80% at 85% 30%, rgb(203 165 30 / 0.17), transparent 70%),
    radial-gradient(40% 60% at 0% 110%, rgb(203 165 30 / 0.08), transparent 70%);
}
.marca-agua {
  position: absolute; z-index: 0; right: -8%; top: 50%; width: min(78vw, 820px); height: auto; translate: 0 -48%;
  opacity: 0.045; pointer-events: none; -webkit-user-select: none; user-select: none;
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
    @keyframes marca-agua { to { translate: 0 -64%; rotate: 5deg; } }
    .marca-agua { animation: marca-agua linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  }
}

/* ── Zonas oscuras: luces en rincones distintos en cada sección ── */
.manifiesto {
  background:
    radial-gradient(60% 70% at 92% 25%, rgb(203 165 30 / 0.08), transparent 70%),
    radial-gradient(50% 60% at 0% 100%, rgb(255 255 255 / 0.03), transparent 70%);
}
.historia { background: radial-gradient(70% 40% at 50% 0%, rgb(203 165 30 / 0.06), transparent 70%); }
.historia::after { content: ""; display: block; height: var(--curva); } /* hueco para que la curva de la zona clara no tape la escena */
#preguntas {
  position: relative;
  padding-top: calc(clamp(72px, 11vw, 144px) + var(--curva) * 0.6);
  background: radial-gradient(60% 50% at 80% 100%, rgb(203 165 30 / 0.08), transparent 70%);
}

/* ── Zonas "papel": el mismo fondo claro de la app, con su curva ── */
.papel {
  position: relative; background: var(--papel); color: var(--ink);
  --texto: #0c0c0c; --suave: #6a665d; --linea: #e0dbd0;
}
.papel { color-scheme: light; } /* controles nativos (barras, etc.) claros sobre el papel */
.papel-2 { background: var(--papel-2); --linea: #d8d3c6; }
.curva { position: absolute; left: 0; width: 100%; height: var(--curva); display: block; pointer-events: none; z-index: 2; }
.curva-arriba { top: calc(-1 * var(--curva) + 1px); color: var(--papel); }
.curva-inv { top: -1px; color: var(--papel-2); }

/* Texto y pastillas sobre papel */
.papel .oficios li:not(.oficio-otro) { background: #fff; }
.papel .oficios .oficio-otro { color: #8a6f0f; border-color: rgb(203 165 30 / 0.6); background: rgb(203 165 30 / 0.08); }
@media (hover: hover) and (pointer: fine) {
  .papel .oficios li:hover { color: #8a6f0f; border-color: rgb(203 165 30 / 0.6); }
}

/* Tarjetas sobre papel: blancas con sombra cálida; dos oscuras y una dorada para el contraste */
.papel .celda {
  background: #fff; border-color: #e7e2d7;
  box-shadow: 0 1px 0 rgb(255 255 255) inset, 0 24px 50px -32px rgb(40 30 5 / 0.4);
}
.papel .celda-icono { background: rgb(203 165 30 / 0.15); color: #8a6f0f; }
.papel .celda-oscura {
  --texto: #f2eee3; --suave: #a9a496; color: var(--texto); border-color: rgb(255 255 255 / 0.06);
  background: radial-gradient(120% 100% at 100% 0%, rgb(203 165 30 / 0.22), transparent 60%), #14130f;
  box-shadow: 0 34px 60px -30px rgb(0 0 0 / 0.7);
}
.papel .celda-oscura .celda-icono { background: rgb(203 165 30 / 0.14); color: var(--oro-claro); }
.papel .celda-precios {
  background: linear-gradient(150deg, #dcc36e 0%, #cba51e 55%, #a98613 100%); border-color: transparent; color: var(--ink);
  --suave: rgb(12 12 12 / 0.82); box-shadow: 0 34px 64px -30px rgb(203 165 30 / 0.7);
}
.papel .celda-precios .celda-icono { background: rgb(12 12 12 / 0.12); color: var(--ink); }
.papel .celda-clientes { background: linear-gradient(180deg, #fff, #f8f6f0); }
.papel .celda-instalar { background: repeating-linear-gradient(135deg, rgb(12 12 12 / 0.045) 0 1px, transparent 1px 14px), #fff; }
@media (hover: hover) and (pointer: fine) {
  .papel .celda:hover { border-color: rgb(203 165 30 / 0.55); }
  .papel .celda-oscura:hover { border-color: rgb(203 165 30 / 0.4); }
  .papel .celda-precios:hover { border-color: transparent; }
}

/* La hoja del PDF asomando por abajo en su tarjeta */
.celda-pdf { padding-bottom: 0; }
.celda-hoja {
  margin: 16px -4px 0; max-height: 170px; overflow: hidden; border-radius: 10px 10px 0 0; border: 1px solid #e6e1d6; border-bottom: 0;
  box-shadow: 0 -12px 40px -22px rgb(0 0 0 / 0.5);
}
.celda-hoja img { display: block; width: 100%; height: auto; }

/* ── Contraste desde el principio: la portada se curva hacia papel nada más empezar (como la cabecera de la app) ── */
.portada::after { content: ""; display: block; height: var(--curva); }
@media (min-width: 900px) { .portada-rejilla { padding-bottom: 36px; min-height: calc(100svh - var(--nav) - var(--curva) * 1.1); } } /* asoma la curva clara en la primera pantalla */
.manifiesto.papel { background: radial-gradient(60% 70% at 92% 25%, rgb(203 165 30 / 0.12), transparent 70%), var(--papel); }
.papel .mani em { color: #9a7b10; }
.curva-papel { color: var(--papel); }
.historia { position: relative; padding-top: var(--curva); }