/* Página de productos: escenas conceptuales.
   La gaviota de Liberty traza lo que resuelve cada producto y las gaviotas del logo llegan a su lugar.
   La animación es SMIL dentro de cada SVG; el JS solo la pausa, la reinicia y la retoma. */

.prod-hero { padding-block: 72px 24px; }
.prod-hero h1 { max-width: 13em; margin-bottom: 18px; }

.prow { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 72px; align-items: center; }
.prow.flip { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); }
.prow.flip .pstage { order: 2; }
.prow + .prow { margin-top: 112px; }
.ptext h2 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); margin-bottom: 12px; }
.ptext p { color: var(--ink-2); margin-bottom: 20px; max-width: 24em; }
.ptags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.ptags span { font: 600 .92rem var(--body); padding: 6px 13px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }

.pstage { position: relative; border-radius: calc(var(--r) * 2); overflow: hidden; border: 1px solid var(--line);
  background:
    radial-gradient(70% 60% at 50% 34%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
    var(--surface);
  box-shadow: 0 1px 2px rgb(15 30 61 / .04), 0 40px 70px -48px rgb(15 30 61 / .35); }
.scene { display: block; width: 100%; height: auto; }
.scene .em { fill: none; stroke: #F8680C; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.scene .pulse { fill: none; stroke: #FFC79A; stroke-width: 3; stroke-opacity: .85; stroke-linecap: round; stroke-linejoin: round; }
.scene .ink { fill: var(--ink); }
.scene .soft { fill: color-mix(in srgb, var(--ink) 9%, transparent); }
.scene .hole { fill: var(--surface); }
.scene .grid-dot { fill: color-mix(in srgb, var(--ink) 10%, transparent); }
.scene .ink-line { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.scene .ink-line.thin { stroke-width: 3; opacity: .45; }
.scene .ink-line.gate { stroke-width: 9; }
.scene .soft-line { fill: none; stroke: color-mix(in srgb, var(--ink) 18%, transparent); stroke-width: 3; stroke-linecap: round; }

.pmore { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.pmore .ptext { margin-top: 22px; }
.pmore .ptext p { margin-bottom: 14px; }


@media (max-width: 1000px) {
  .prow, .prow.flip { grid-template-columns: 1fr; gap: 28px; }
  .prow.flip .pstage { order: 0; }
  .prow + .prow { margin-top: 80px; }
  .pmore { grid-template-columns: 1fr; }
}
.scene .em-glow { fill: none; stroke: #F8680C; stroke-width: 26; stroke-linecap: round; stroke-linejoin: round; opacity: .1; }