/* ============================================================ PRODUCTOS — showcase pages (CRM FondeaPro · Nutfit · InvitAll) Shared layout on top of styles-v3 / pages-v3. Each page sets --acc (accent) and --acc-soft on . ============================================================ */ :root{--acc:var(--blue);--acc-soft:rgba(0,51,160,.08);--acc-ink:#fff} /* ---------- hero ---------- */ .pr-hero{padding:88px 0 0;background:radial-gradient(ellipse at 80% 0%,var(--acc-soft),transparent 55%),var(--cream)} .pr-hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:end} .pr-chip{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border:1px solid var(--line);background:var(--off);border-radius:999px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 24px} .pr-chip img{height:24px;width:auto;border-radius:6px;display:block} .pr-chip b{color:var(--ink);font-weight:600;letter-spacing:.06em} .pr-hero h1{font-size:clamp(44px,5.6vw,80px);letter-spacing:-.025em;line-height:1;max-width:14ch} .pr-hero h1 em{font-style:italic;color:var(--acc)} .pr-hero .lead{margin-top:24px;max-width:54ch} .pr-hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px} .pr-hero .hero-meta-row{margin-top:48px;border-bottom:0} .pr-hero .mi-val{font-size:22px} .pr-hero-shot{align-self:end;margin-bottom:-2px} /* browser / phone frames */ .pr-frame{position:relative;border-radius:14px;background:#0f1113;padding:10px 10px 0;box-shadow:0 30px 80px rgba(0,0,0,.22),0 0 0 1px rgba(0,0,0,.14)} .pr-frame::before{content:"";display:block;height:14px;margin:0 0 8px 6px;width:44px;background:radial-gradient(circle at 5px 7px,#ff5f57 4px,transparent 5px),radial-gradient(circle at 22px 7px,#febc2e 4px,transparent 5px),radial-gradient(circle at 39px 7px,#28c840 4px,transparent 5px)} .pr-frame img{display:block;width:100%;height:auto;border-radius:8px 8px 0 0} .pr-frame.full img{border-radius:8px} .pr-frame.full{padding-bottom:10px} .pr-phone{position:relative;width:300px;max-width:100%;border-radius:40px;background:#111;padding:11px;box-shadow:0 30px 70px rgba(0,0,0,.28),0 0 0 1px rgba(0,0,0,.2)} .pr-phone::before{content:"";position:absolute;top:13px;left:50%;transform:translateX(-50%);width:88px;height:22px;background:#111;border-radius:12px;z-index:2} .pr-phone img{display:block;width:100%;height:auto;border-radius:30px} /* ---------- hero shot strip below the hero ---------- */ .pr-shotband{padding:56px 0 0} .pr-shotband .pr-frame{max-width:1200px;margin:0 auto} /* ---------- section headings ---------- */ .pr-sec{padding:112px 0} .pr-sec.alt{background:var(--off);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .pr-head{display:grid;grid-template-columns:200px 1fr;gap:40px;margin-bottom:48px} .pr-head .cb-eye{color:var(--acc)} .pr-head h2{font-size:clamp(32px,3.6vw,48px);letter-spacing:-.02em;line-height:1.06;max-width:20ch} .pr-head h2 em{font-style:italic;color:var(--acc)} .pr-head .lead{margin-top:16px} .pr-body{display:grid;grid-template-columns:200px 1fr;gap:40px} .pr-body>div:last-child p{color:var(--muted);max-width:66ch} .pr-body>div:last-child p+p{margin-top:16px} /* ---------- feature rows (alternating shot + text) ---------- */ .pr-feature{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:56px 0;border-top:1px solid var(--line)} .pr-feature:last-child{border-bottom:1px solid var(--line)} .pr-feature.rev>div:first-child{order:2} .pr-feature .num{font-size:13px;color:var(--acc);letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;display:block} .pr-feature h3{font-size:30px;letter-spacing:-.6px;line-height:1.1;margin-bottom:14px} .pr-feature h3 em{font-style:italic;color:var(--acc)} .pr-feature p{color:var(--muted);max-width:52ch} .pr-feature ul{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:10px} .pr-feature li{position:relative;padding-left:22px;font-size:15px;color:var(--ink-83)} .pr-feature li::before{content:"";position:absolute;left:0;top:9px;width:10px;height:10px;border-radius:50%;background:var(--acc-soft);box-shadow:0 0 0 1px var(--acc) inset} .pr-feature .pr-frame img{aspect-ratio:16/10;object-fit:cover;object-position:top} .pr-feature .pr-stub{aspect-ratio:16/10;border-radius:12px;border:1px dashed var(--ink-40);background:repeating-linear-gradient(135deg,#f0ede5 0 10px,#f7f4ed 10px 20px);display:grid;place-items:center;text-align:center;padding:24px;font-size:13px;color:var(--muted);line-height:1.5} .pr-feature .pr-stub b{display:block;color:var(--ink);font-weight:600;margin-bottom:6px} /* ---------- module grid ---------- */ .pr-modules{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden} .pr-mod{background:var(--off);padding:26px 24px;min-height:190px;display:flex;flex-direction:column} .pr-mod .k{font-size:12px;color:var(--acc);letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px} .pr-mod h4{font-size:19px;font-weight:600;letter-spacing:-.3px;margin-bottom:8px} .pr-mod p{font-size:14.5px;color:var(--muted);line-height:1.5} .pr-mod .beta{margin-left:8px;font-size:10px;padding:2px 6px;border-radius:4px;background:var(--acc-soft);color:var(--acc);letter-spacing:.08em;vertical-align:middle} /* ---------- figures ---------- */ .pr-figures{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:48px} .pr-fig{background:var(--off);padding:28px 24px} .pr-fig .v{font-size:40px;font-weight:600;letter-spacing:-1.2px;line-height:1;color:var(--ink)} .pr-fig .v em{font-style:italic;font-weight:400;color:var(--acc)} .pr-fig .l{margin-top:10px;font-size:13.5px;color:var(--muted)} /* ---------- stack chips ---------- */ .pr-stack{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px} .pr-stack span{background:var(--acc-soft);color:var(--acc);border:1px solid color-mix(in srgb,var(--acc) 25%,transparent);padding:6px 14px;border-radius:999px;font-size:12.5px;letter-spacing:.04em} /* ---------- gallery ---------- */ .pr-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .pr-gallery figure{margin:0} .pr-gallery .pr-frame img{aspect-ratio:16/10;object-fit:cover;object-position:top} .pr-gallery figcaption{margin-top:12px;font-size:13.5px;color:var(--muted)} .pr-gallery figcaption b{color:var(--ink);font-weight:600} .pr-gallery.two{grid-template-columns:1fr 1fr} .pr-gallery .tall{grid-row:span 2} /* ---------- timeline / process ---------- */ .pr-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .pr-step{padding-top:20px;border-top:2px solid var(--acc)} .pr-step .n{font-size:13px;color:var(--acc);margin-bottom:10px} .pr-step h4{font-size:18px;font-weight:600;margin-bottom:8px} .pr-step p{font-size:14.5px;color:var(--muted)} /* ---------- dark live panel ---------- */ .pr-live{margin-top:56px;background:#0b0c0e;color:#f1ece4;border-radius:24px;padding:48px;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;position:relative;overflow:hidden} .pr-live::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 90% 10%,color-mix(in srgb,var(--acc) 45%,transparent),transparent 55%),radial-gradient(ellipse at 5% 95%,color-mix(in srgb,var(--acc) 22%,transparent),transparent 55%);pointer-events:none} .pr-live>*{position:relative;z-index:1} .pr-live .cb-eye{color:color-mix(in srgb,var(--acc) 60%,#fff)} .pr-live h3{font-size:clamp(32px,3.6vw,52px);letter-spacing:-.02em;line-height:1.02;margin:14px 0 14px;color:#fff} .pr-live h3 em{font-style:italic;color:color-mix(in srgb,var(--acc) 55%,#fff)} .pr-live p{color:rgba(241,236,228,.78);max-width:50ch} .pr-live .cta{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap} .pr-live .btn-acc{background:var(--acc);color:var(--acc-ink);box-shadow:0 10px 30px color-mix(in srgb,var(--acc) 35%,transparent)} .pr-live .btn-acc:hover{filter:brightness(1.1);color:var(--acc-ink)} .pr-live .btn-dim{color:#fff;border:1px solid rgba(255,255,255,.3)} .pr-live .btn-dim:hover{background:rgba(255,255,255,.08);color:#fff} .pr-live .pr-frame{box-shadow:0 30px 80px rgba(0,0,0,.6)} /* ---------- privacy note ---------- */ .pr-note{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--off);font-size:13.5px;color:var(--muted);margin-top:28px;max-width:66ch} .pr-note svg{flex:none;width:18px;height:18px;margin-top:2px;color:var(--acc)} /* ---------- responsive ---------- */ @media (max-width:1000px){ .pr-hero .wrap{grid-template-columns:1fr;gap:40px} .pr-modules,.pr-gallery{grid-template-columns:1fr 1fr} .pr-figures,.pr-steps{grid-template-columns:1fr 1fr} .pr-live{grid-template-columns:1fr;padding:32px} } @media (max-width:720px){ .pr-hero{padding-top:56px} .pr-hero .hero-meta-row{grid-template-columns:1fr 1fr} .pr-hero .hero-meta-row>div{padding:14px 12px 14px 0} .pr-hero .hero-meta-row>div+div{border-left:0;padding-left:0} .pr-hero .hero-meta-row>div:nth-child(even){border-left:1px solid var(--line);padding-left:12px} .pr-sec{padding:72px 0} .pr-head,.pr-body{grid-template-columns:1fr;gap:12px} .pr-feature{grid-template-columns:1fr;gap:24px;padding:40px 0} .pr-feature.rev>div:first-child{order:0} .pr-modules,.pr-gallery,.pr-gallery.two,.pr-figures,.pr-steps{grid-template-columns:1fr} .pr-gallery .tall{grid-row:auto} .pr-fig .v{font-size:32px} .pr-phone{width:240px} } /* ---------- hub + safety: images always keep their own ratio ---------- */ .product-visual-stub:has(.pv-img){aspect-ratio:auto;display:block} .pv-img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:top;display:block} .pr-frame img{height:auto} .pr-hero-shot .pr-frame img{aspect-ratio:16/10;object-fit:cover;object-position:top} .pr-live .pr-frame img{aspect-ratio:16/10;object-fit:cover;object-position:top} .pr-phones{display:flex;justify-content:center;gap:24px;align-items:flex-start;flex-wrap:wrap} @media (max-width:720px){.pr-phones{gap:16px}.pr-phones .pr-phone{width:min(240px,calc(50% - 8px))}}