/* Ajuste de identidad PIREPURA: paleta oficial y logo como marca principal. */
:root {
  --ink: #003c33;
  --paper: #f7f3e9;
  --lime: #008f79;
  --coral: #e95c49;
  --teal: #008f79;
}

.brand img {
  display: block;
  width: 128px;
  height: 86px;
  object-fit: contain;
}

.nav { height: 104px; }

.hero { overflow: hidden; }

body { isolation: isolate; }

body::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: -30%;
  pointer-events: none;
  opacity: .8;
  background:
    radial-gradient(circle at 24% 26%, rgba(233, 92, 73, .18) 0, rgba(233, 92, 73, 0) 22%),
    radial-gradient(circle at 76% 67%, rgba(0, 143, 121, .18) 0, rgba(0, 143, 121, 0) 26%),
    radial-gradient(circle at 74% 20%, rgba(247, 243, 233, .92) 0, rgba(247, 243, 233, 0) 24%);
  animation: pirepura-ambient 18s ease-in-out infinite alternate;
}

body > header, body > main, body > footer { position: relative; z-index: 1; }
.hero > * { position: relative; z-index: 1; }

@keyframes pirepura-ambient {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to { transform: translate3d(3%, 2%, 0) scale(1.06); }
}

.orb-a { background: #008f79; box-shadow: inset -65px -50px 0 #005646; }
.orb-b { background: #f7f3e9; border: 16px solid #008f79; }
.lime { background: #e95c49; color: #f7f3e9; }
.lime .icon { color: #f7f3e9; }
.coral { background: #00735f; color: #f7f3e9; }
.process-visual { background: #008f79; }
.process-core { background: #003c33; color: #f7f3e9; }
.circle-word { border-color: #006a58; }
.light-button { background: #008f79; color: #f7f3e9; }
.demo-window { display: block; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.demo-window:hover { transform: translate(-4px, -4px); box-shadow: 18px 18px 0 #e95c49; }
.primary { background: #003c33; }
.statement { background: #e95c49; color: #f7f3e9; }
.statement .eyebrow i { background: #f7f3e9; }

@media (max-width: 760px) {
  .brand img { width: 98px; height: 66px; }
  .nav { height: 82px; }
}


/* Tarjetas de demos */
.demo-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.demo-card { min-height: 350px; padding: 28px; display: flex; flex-direction: column; border: 1px solid rgba(247,243,233,.22); color: #f7f3e9; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.demo-card-featured { background: #008f79; border-color: #24d2ad; }
.demo-card-featured:hover { transform: translate(-5px,-5px); box-shadow: 14px 14px 0 #e95c49; }
.demo-card-apart { background: #003c33; }
.demo-card-soon { background: rgba(247,243,233,.06); border-style: dashed; }
.demo-tag { font: 500 10px/1 "DM Mono", monospace; letter-spacing: .12em; color: #b7f7e5; }
.demo-card-icon { width: 62px; height: 62px; margin: auto 0 24px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font: 700 17px/1 Manrope, sans-serif; }
.demo-card h3 { margin: 0 0 10px; font-size: 27px; letter-spacing: -.04em; }
.demo-card p { margin: 0; max-width: 26ch; color: rgba(247,243,233,.76); line-height: 1.55; }
.demo-link { margin-top: 28px; font: 500 12px/1 "DM Mono", monospace; letter-spacing: .05em; }
.demo-link b { font-size: 17px; margin-left: 6px; }
.muted { color: rgba(247,243,233,.48); }
@media (max-width: 760px) { .demo-cards { grid-template-columns: 1fr; } .demo-card { min-height: 260px; } }


/* Movimiento sutil de las formas del encabezado */
.orb { will-change: transform; }
.orb-a { animation: pirepura-orb-a 11s ease-in-out infinite alternate; }
.orb-b { animation: pirepura-orb-b 14s ease-in-out infinite alternate; }

@keyframes pirepura-orb-a {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to { transform: translate3d(-18px, -14px, 0) rotate(8deg); }
}

@keyframes pirepura-orb-b {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-12px, 16px, 0) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .orb-a, .orb-b { animation: none; }
}


/* Vista previa real de productos y aparición al recorrer la página */
.demo-card-featured {
  padding: 20px;
  overflow: hidden;
  background: #f7f3e9;
  color: #003c33;
  border-color: rgba(247,243,233,.7);
}
.demo-card-featured .demo-tag { color: #00735f; }
.demo-card-featured p { color: rgba(0,60,51,.7); }
.demo-card-featured .demo-link { color: #003c33; }
.demo-preview {
  height: 156px;
  margin: 14px -20px 22px;
  position: relative;
  overflow: hidden;
  background: #e9eee9;
  border-top: 1px solid rgba(0,60,51,.14);
  border-bottom: 1px solid rgba(0,60,51,.14);
  box-shadow: inset 0 0 0 1px rgba(0,60,51,.06);
}
.demo-preview iframe {
  position: absolute;
  inset: 0 auto auto 0;
  width: 400%;
  height: 720px;
  border: 0;
  transform: scale(.25);
  transform-origin: top left;
  pointer-events: none;
}
.demo-preview::after {
  content: "VISTA PREVIA · TIRO FEDERAL";
  position: absolute;
  right: 10px;
  bottom: 9px;
  padding: 5px 7px;
  color: #f7f3e9;
  background: rgba(0,60,51,.82);
  font: 500 8px/1 "DM Mono", monospace;
  letter-spacing: .08em;
}
.demo-preview-glow {
  position: absolute;
  inset: auto 0 0;
  height: 38%;
  background: linear-gradient(transparent, rgba(247,243,233,.38));
  pointer-events: none;
}
@supports (animation-timeline: view()) {
  .demo-card {
    animation: pirepura-demo-reveal linear both;
    animation-timeline: view();
    animation-range: entry 12% cover 35%;
  }
  @keyframes pirepura-demo-reveal {
    from { opacity: 0; transform: translateY(34px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
}
@media (max-width: 760px) {
  .demo-preview { height: 142px; }
}