/* Hocico Phone — Página Hocico ID / Chapa NFC */

/* Lienzo continuo: todas las secciones claras comparten el mismo papel y se funden */
.pr-page{ background:var(--hp-paper); max-width:1440px; }
.pr-flow{ position:relative; }
/* glow ambiental difuso que recorre el lienzo claro */
.pr-flow::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(60% 38% at 88% 6%, rgba(55,230,164,.10), transparent 70%),
    radial-gradient(55% 34% at 6% 64%, rgba(242,113,90,.06), transparent 72%); }
.pr-flow > *{ position:relative; z-index:1; }

/* ───────── HERO (oscuro, se difumina hacia el papel) ───────── */
.pr-hero{ position:relative; overflow:hidden; padding:76px 56px 110px;
  background:
    linear-gradient(180deg, rgba(250,246,238,0) 66%, var(--hp-paper) 100%),
    radial-gradient(130% 100% at 78% 0%, #143025, #0A1712 62%); }
.pr-hero::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(60% 80% at 18% 95%, rgba(55,230,164,.16), transparent 72%); }
.pr-hero-grid{ position:relative; z-index:1; max-width:1140px; margin:0 auto;
  display:grid; grid-template-columns:1.1fr .9fr; gap:52px; align-items:center; }
.pr-eyebrow{ display:inline-flex; align-items:center; gap:9px; font-size:11.5px; font-weight:800;
  letter-spacing:.18em; text-transform:uppercase; color:#37E6A4; }
.pr-eyebrow svg{ flex:0 0 auto; }
.pr-h1{ font-family:var(--font-display); font-weight:800; font-size:46px; line-height:1.05;
  letter-spacing:-.025em; color:#fff; margin:18px 0 0; text-wrap:balance; }
.pr-h1 em{ font-style:normal; color:#37E6A4; }
.pr-sub{ font-size:18px; line-height:1.55; color:rgba(234,243,238,.74); margin:18px 0 0; max-width:30em; }
.pr-sub b{ color:#EAF3EE; font-weight:700; }
.pr-hero-ctas{ display:flex; flex-wrap:wrap; gap:13px; margin-top:28px; }
.pr-btn{ display:inline-flex; align-items:center; gap:9px; padding:14px 24px; border-radius:999px;
  font-size:14.5px; font-weight:800; cursor:pointer; border:none; transition:transform .15s, box-shadow .2s; }
.pr-btn.solid{ color:#04130D; background:linear-gradient(135deg,#37E6A4,#2A9F84);
  box-shadow:0 16px 40px -14px rgba(55,230,164,.6); }
.pr-btn.solid:hover{ transform:translateY(-2px); box-shadow:0 22px 50px -14px rgba(55,230,164,.7); }
.pr-btn.ghost{ color:#EAF3EE; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.2); }
.pr-btn.ghost:hover{ background:rgba(255,255,255,.13); }
.pr-hero-seal{ margin-top:22px; font-size:12.5px; color:rgba(234,243,238,.55); letter-spacing:.01em; }

.pr-hero-phone{ display:flex; flex-direction:column; align-items:center; gap:13px; }
.pr-hero-phone .hpx-device{ box-shadow:0 60px 120px -40px rgba(0,0,0,.7),
  0 0 0 1px rgba(255,255,255,.05), inset 0 0 0 2px rgba(255,255,255,.05); }
.pr-hero-url{ font-size:12px; color:rgba(234,243,238,.5); font-family:"JetBrains Mono", ui-monospace, monospace; }

/* ───────── ENCABEZADOS DE SECCIÓN ───────── */
.pr-sec-head{ text-align:center; max-width:38rem; margin:0 auto 34px; }
.pr-kicker{ font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--hp-green-700); }
.pr-h2{ font-family:var(--font-display); font-weight:800; font-size:32px; letter-spacing:-.02em;
  color:var(--hp-ink); margin:12px 0 0; text-wrap:balance; }
.pr-h2 em{ font-style:normal; color:var(--hp-green); }
.pr-lead{ font-size:15.5px; line-height:1.6; color:var(--hp-slate); margin:13px 0 0; }

/* ───────── PASOS (sobre el papel, sin costura con el héroe) ───────── */
.pr-steps{ max-width:1140px; margin:0 auto; padding:8px 56px 0; }
.pr-steps-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.pr-step{ position:relative; padding:26px 24px; border-radius:22px;
  background:rgba(255,255,255,.7); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(230,236,234,.9); box-shadow:0 20px 44px -34px rgba(20,36,31,.3); }
.pr-step-n{ font-family:"JetBrains Mono", ui-monospace, monospace; font-size:13px; font-weight:700; color:var(--hp-green-700);
  width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--hp-green-50); border:1px solid var(--hp-green-100); }
.pr-step-ic{ position:absolute; top:26px; right:24px; opacity:.9; }
.pr-step-t{ font-size:18px; font-weight:800; letter-spacing:-.01em; color:var(--hp-ink); margin:16px 0 0; }
.pr-step-d{ font-size:14px; line-height:1.55; color:var(--hp-slate); margin:8px 0 0; }
.pr-step-tag{ display:inline-flex; align-items:center; gap:7px; margin-top:14px; padding:6px 12px;
  border-radius:999px; font-size:11.5px; font-weight:700; background:var(--hp-white); border:1px solid var(--hp-mist);
  color:var(--hp-graphite); }
.pr-step-tag .d{ width:6px; height:6px; border-radius:50%; background:var(--hp-green); }

/* ───────── DEMO EN VIVO · panel oscuro flotante ───────── */
.pr-demo{ margin:40px auto 0; max-width:1240px; border-radius:30px; overflow:hidden;
  box-shadow:0 50px 110px -55px rgba(10,23,18,.55), 0 0 0 1px rgba(20,36,31,.05); }
.pr-demo .fp-stage{ min-height:auto; padding:44px 26px 48px; border-radius:30px; }

/* ───────── PLANES (mismo papel, fundido con pasos y privacidad) ───────── */
.pr-plans{ padding:64px 56px 12px; background:transparent; }
.pr-plans-grid{ max-width:980px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:stretch; }
.pr-plan{ display:flex; flex-direction:column; padding:32px 30px; border-radius:26px;
  background:rgba(255,255,255,.78); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(230,236,234,.9); box-shadow:0 30px 64px -42px rgba(20,36,31,.26); }
.pr-plan.feat{ background:linear-gradient(170deg,#10241B,#0A1712); border-color:transparent; color:#EAF3EE; position:relative; }
.pr-plan-flag{ position:absolute; top:-13px; left:30px; padding:6px 15px; border-radius:999px; font-size:11.5px;
  font-weight:800; letter-spacing:.04em; color:#04130D; background:linear-gradient(135deg,#37E6A4,#2A9F84); }
.pr-plan-name{ font-size:12.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--hp-green-700); }
.pr-plan.feat .pr-plan-name{ color:#37E6A4; }
.pr-plan-price{ display:flex; align-items:baseline; gap:8px; margin:14px 0 0; }
.pr-plan-price b{ font-family:var(--font-display); font-size:40px; font-weight:800; letter-spacing:-.03em; color:var(--hp-ink); }
.pr-plan.feat .pr-plan-price b{ color:#fff; }
.pr-plan-price span{ font-size:15px; font-weight:600; color:var(--hp-slate); }
.pr-plan.feat .pr-plan-price span{ color:rgba(234,243,238,.6); }
.pr-plan-desc{ font-size:14px; line-height:1.5; color:var(--hp-slate); margin:9px 0 0; min-height:42px; }
.pr-plan.feat .pr-plan-desc{ color:rgba(234,243,238,.72); }
.pr-plan-feats{ list-style:none; margin:20px 0 0; padding:20px 0 0; border-top:1px solid var(--hp-mist);
  display:flex; flex-direction:column; gap:12px; }
.pr-plan.feat .pr-plan-feats{ border-color:rgba(255,255,255,.12); }
.pr-plan-feats li{ display:flex; gap:11px; align-items:flex-start; font-size:14px; line-height:1.5; color:var(--hp-graphite); }
.pr-plan.feat .pr-plan-feats li{ color:rgba(234,243,238,.88); }
.pr-plan-feats li svg{ flex:0 0 auto; margin-top:2px; }
.pr-plan-feats li b{ font-weight:700; color:var(--hp-ink); }
.pr-plan.feat .pr-plan-feats li b{ color:#fff; }
.pr-plan-cta{ margin-top:22px; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 22px; border-radius:14px; font-size:14.5px; font-weight:800; cursor:pointer; transition:transform .15s; }
.pr-plan-cta:hover{ transform:translateY(-2px); }
.pr-plan-cta.line{ color:var(--hp-ink); background:var(--hp-white); border:1.5px solid var(--hp-ink); }
.pr-plan-cta.fill{ color:#04130D; background:linear-gradient(135deg,#37E6A4,#2A9F84); border:none;
  box-shadow:0 16px 36px -14px rgba(55,230,164,.55); }
.pr-plan-note{ font-size:11.5px; line-height:1.5; color:var(--hp-stone); margin:14px 0 0; }
.pr-plan.feat .pr-plan-note{ color:rgba(234,243,238,.5); }

/* ───────── PRIVACIDAD (continúa el lienzo) ───────── */
.pr-priv{ padding:58px 56px 8px; }
.pr-priv-grid{ max-width:1040px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.pr-priv-card{ padding:26px 24px; border-radius:22px;
  background:linear-gradient(180deg, rgba(236,247,242,.85), rgba(236,247,242,.5));
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border:1px solid var(--hp-green-100); }
.pr-priv-ic{ width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:var(--hp-white); border:1px solid var(--hp-green-100); }
.pr-priv-t{ font-size:16.5px; font-weight:800; letter-spacing:-.01em; color:var(--hp-ink); margin:16px 0 0; }
.pr-priv-d{ font-size:13.5px; line-height:1.55; color:var(--hp-graphite); margin:7px 0 0; }

/* ───────── CTA FINAL · panel oscuro flotante ───────── */
.pr-final{ margin:56px 56px 80px; padding:56px 48px; border-radius:32px;
  background:radial-gradient(120% 130% at 80% 0%, #143025, #0A1712 64%); text-align:center; position:relative; overflow:hidden; }
.pr-final::after{ content:""; position:absolute; inset:0; background:radial-gradient(50% 80% at 20% 120%, rgba(55,230,164,.16), transparent 70%); }
.pr-final-in{ position:relative; z-index:1; max-width:40rem; margin:0 auto; }
.pr-final h2{ font-family:var(--font-display); font-weight:800; font-size:34px; letter-spacing:-.02em; color:#fff; margin:0; text-wrap:balance; }
.pr-final p{ font-size:16px; line-height:1.55; color:rgba(234,243,238,.74); margin:14px 0 0; }
.pr-final .pr-hero-ctas{ justify-content:center; margin-top:26px; }
.pr-final-tagline{ position:relative; z-index:1; margin-top:22px; font-size:15px; font-style:italic; color:rgba(234,243,238,.62); text-wrap:balance; }

/* ───────── RESPONSIVE ───────── */
@media (max-width:980px){
  .pr-hero{ padding:60px 24px 88px; }
  .pr-hero-grid{ grid-template-columns:1fr; gap:40px; }
  .pr-h1{ font-size:37px; }
  .pr-steps{ padding:8px 24px 0; }
  .pr-steps-grid{ grid-template-columns:1fr; }
  .pr-plans{ padding:52px 24px 8px; }
  .pr-plans-grid{ grid-template-columns:1fr; }
  .pr-priv{ padding:48px 24px 4px; }
  .pr-priv-grid{ grid-template-columns:1fr; }
  .pr-final{ margin:44px 20px 56px; padding:44px 24px; }
  .pr-final h2{ font-size:27px; }
}
@media (max-width:560px){
  .pr-hero{ padding:48px 18px 76px; }
  .pr-h1{ font-size:32px; }
  .pr-sub{ font-size:16px; }
  .pr-hero-ctas .pr-btn{ width:100%; justify-content:center; }
  .pr-h2{ font-size:27px; }
  .pr-plan{ padding:26px 22px; }
  .pr-plan-price b{ font-size:36px; }
  .pr-demo{ border-radius:24px; }
  .pr-demo .fp-stage{ border-radius:24px; padding:32px 16px 36px; }
  .pr-final .pr-btn{ width:100%; justify-content:center; }
}