:root{
      --yellow:#ffc627;
      --yellow-dark:#f2b700;
      --ink:#101828;
      --muted:#667085;
      --soft:#f7f8fb;
      --white:#ffffff;
      --blue:#1e5a96;
      --blue-2:#2e7bb0;
      --green:#12b76a;
      --red:#f04438;
      --shadow:0 24px 70px rgba(16,24,40,.13);
      --shadow-soft:0 14px 35px rgba(16,24,40,.09);
      --radius:28px;
    }
    *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink);background:linear-gradient(180deg,#fff 0%,#f8fafc 42%,#fff 100%);overflow-x:hidden}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.container{width:min(1180px,calc(100% - 40px));margin:0 auto}.pill{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid rgba(16,24,40,.08);border-radius:999px;background:rgba(255,255,255,.82);box-shadow:0 6px 20px rgba(16,24,40,.06);font-weight:700;color:#344054;font-size:13px;backdrop-filter:blur(14px)}.dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 7px rgba(18,183,106,.12)}
    .nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.78);backdrop-filter:blur(18px);border-bottom:1px solid rgba(16,24,40,.08)}.nav-inner{height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:12px}.brand-logo{height:48px;width:190px;object-fit:contain;background:#fff;border-radius:14px;padding:6px;box-shadow:0 10px 24px rgba(16,24,40,.08)}.menu{display:flex;align-items:center;gap:8px;font-weight:700;color:#344054;font-size:14px}.menu a{padding:12px 14px;border-radius:999px}.menu a:hover{background:#f2f4f7}.nav-actions{display:flex;align-items:center;gap:12px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:none;border-radius:999px;padding:14px 20px;font-weight:800;cursor:pointer;transition:.25s ease;white-space:nowrap}.btn-primary{background:linear-gradient(135deg,var(--yellow),#ffdf6b);color:#101828;box-shadow:0 14px 30px rgba(255,198,39,.34)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 42px rgba(255,198,39,.44)}.btn-ghost{background:#fff;color:#1d2939;border:1px solid rgba(16,24,40,.1)}.btn-ghost:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft)}
    .hero{position:relative;padding:86px 0 68px;overflow:hidden}.hero:before{content:"";position:absolute;inset:-160px -160px auto auto;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,var(--yellow) 0%,rgba(255,198,39,.28) 44%,transparent 70%);filter:blur(2px);z-index:-1}.hero:after{content:"";position:absolute;left:-210px;top:140px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(46,123,176,.2),transparent 70%);z-index:-1}.hero-grid{display:grid;grid-template-columns:1.03fr .97fr;gap:56px;align-items:center}.hero h1{font-size:clamp(46px,6vw,82px);line-height:.96;letter-spacing:-.065em;margin:22px 0 20px}.hero h1 span{display:block;background:linear-gradient(135deg,#1e5a96 0%,#2e7bb0 42%,#ffc627 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.hero p{font-size:19px;line-height:1.72;color:#475467;margin:0 0 28px;max-width:660px}.hero-actions{display:flex;gap:14px;flex-wrap:wrap}.trust-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}.trust-card{background:rgba(255,255,255,.82);border:1px solid rgba(16,24,40,.08);border-radius:20px;padding:18px;box-shadow:var(--shadow-soft)}.trust-card strong{display:block;font-size:27px;letter-spacing:-.04em}.trust-card small{color:var(--muted);font-weight:700}.visual{position:relative;min-height:610px}.phone-card{position:absolute;right:52px;top:0;width:330px;padding:14px;border-radius:44px;background:#111827;box-shadow:0 34px 80px rgba(16,24,40,.28);transform:none}.phone-screen{border-radius:34px;overflow:hidden;background:linear-gradient(180deg,#fff,#f9fafb);padding:20px;min-height:650px}.app-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.avatar{width:42px;height:42px;border-radius:15px;background:linear-gradient(135deg,var(--yellow),#fff0b3);display:grid;place-items:center;font-weight:900}.status-card{background:linear-gradient(135deg,#1e5a96,#2e7bb0 70%,#4a9fd8);color:#fff;border-radius:26px;padding:22px;box-shadow:0 20px 38px rgba(30,90,150,.25)}.status-card small{opacity:.8}.status-card h3{font-size:25px;margin:8px 0 4px}.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}.mini{background:#fff;border:1px solid #eaecf0;border-radius:20px;padding:16px;box-shadow:0 10px 26px rgba(16,24,40,.07)}.mini b{font-size:22px}.list{margin-top:16px;display:grid;gap:12px}.list-item{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #eaecf0;border-radius:18px;padding:13px}.icon{width:40px;height:40px;border-radius:14px;background:#fff6d6;display:grid;place-items:center}.push{position:absolute;left:4px;top:80px;width:310px;background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.65);backdrop-filter:blur(22px);border-radius:26px;padding:18px;box-shadow:var(--shadow);animation:float 5.5s ease-in-out infinite}.push-head{display:flex;align-items:center;gap:10px;font-weight:900}.push p{font-size:14px;margin:8px 0 0;color:#344054;line-height:1.4}.reader{position:absolute;left:18px;bottom:46px;width:230px;background:#fff;border:1px solid rgba(16,24,40,.08);border-radius:30px;padding:18px;box-shadow:var(--shadow);animation:float 6s ease-in-out infinite reverse}.reader-face{height:150px;border-radius:24px;background:radial-gradient(circle at 50% 36%,#fff 0 16%,transparent 17%),linear-gradient(135deg,#e8f1fb,#fef4ce);display:grid;place-items:center;font-size:58px}.scan{height:7px;border-radius:999px;background:linear-gradient(90deg,transparent,var(--green),transparent);margin-top:-78px;position:relative;animation:scan 2.5s linear infinite}.reader small{display:block;margin-top:86px;color:#667085;font-weight:800}.floating-chip{position:absolute;right:0;bottom:0;background:#101828;color:#fff;border-radius:999px;padding:14px 18px;font-weight:900;box-shadow:var(--shadow)}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}@keyframes scan{0%{transform:translateY(-50px)}100%{transform:translateY(58px)}}
    section{padding:88px 0}.section-title{text-align:center;margin-bottom:42px}.section-title h6{display:inline-flex;margin:0 0 12px;padding:8px 12px;border-radius:999px;background:#fff6d6;color:#9b6a00;font-weight:900}.section-title h2{font-size:clamp(32px,4vw,54px);letter-spacing:-.05em;line-height:1.02;margin:0}.section-title p{max-width:720px;margin:16px auto 0;color:var(--muted);font-size:17px;line-height:1.7}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.feature-card{background:#fff;border:1px solid rgba(16,24,40,.08);border-radius:var(--radius);padding:25px;box-shadow:var(--shadow-soft);transition:.28s ease;position:relative;overflow:hidden}.feature-card:before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,var(--yellow),var(--blue-2))}.feature-card:hover{transform:translateY(-8px);box-shadow:var(--shadow)}.feature-card .icon{width:54px;height:54px;font-size:24px;margin-bottom:18px}.feature-card h3{font-size:20px;margin:0 0 10px;letter-spacing:-.025em}.feature-card p{color:var(--muted);line-height:1.62;margin:0}.apps{background:#101828;color:#fff;position:relative;overflow:hidden}.apps:before{content:"";position:absolute;right:-140px;top:-140px;width:420px;height:420px;border-radius:50%;background:rgba(255,198,39,.18);filter:blur(20px)}.apps .section-title p{color:#cbd5e1}.apps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.app-card{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.045));border:1px solid rgba(255,255,255,.14);border-radius:30px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.22)}.app-shot{height:210px;background:linear-gradient(135deg,#26384f,#111827);display:grid;place-items:center;overflow:hidden}.app-shot img{height:100%;width:100%;object-fit:cover;opacity:.9}.app-body{padding:24px}.app-body h3{margin:0 0 10px;font-size:22px}.app-body p{margin:0;color:#cbd5e1;line-height:1.65}.flow{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}.flow-card{background:#fff;border-radius:34px;padding:34px;border:1px solid rgba(16,24,40,.08);box-shadow:var(--shadow-soft)}.flow-list{display:grid;gap:16px}.flow-item{display:grid;grid-template-columns:54px 1fr;gap:16px;align-items:start}.num{width:54px;height:54px;border-radius:18px;background:#101828;color:#fff;display:grid;place-items:center;font-weight:900}.flow-item h3{margin:0 0 6px}.flow-item p{margin:0;color:var(--muted);line-height:1.6}.dashboard{background:linear-gradient(135deg,#fff,#f2f8ff);border-radius:34px;padding:26px;border:1px solid rgba(16,24,40,.08);box-shadow:var(--shadow)}.dash-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.bars{display:grid;gap:12px}.bar{height:48px;border-radius:16px;background:#fff;border:1px solid #e4e7ec;overflow:hidden;position:relative}.bar span{display:block;height:100%;border-radius:16px;background:linear-gradient(90deg,var(--blue),var(--yellow));opacity:.9}.bar b{position:absolute;left:14px;top:14px;font-size:13px}.clients{background:#f8fafc}.logo-cloud{display:grid;grid-template-columns:repeat(7,1fr);gap:14px}.logo-card{height:110px;border-radius:24px;background:#fff;border:1px solid #eaecf0;box-shadow:0 10px 28px rgba(16,24,40,.06);overflow:hidden;display:grid;place-items:center}.logo-card img{width:100%;height:100%;object-fit:cover}.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.quote{background:#fff;border:1px solid #eaecf0;border-radius:30px;padding:26px;box-shadow:var(--shadow-soft)}.quote p{color:#475467;line-height:1.72;margin:0 0 18px}.quote b{display:block}.quote small{color:var(--muted)}.cta{padding:70px 0}.cta-box{background:linear-gradient(135deg,#101828,#1e5a96 58%,#ffc627 140%);border-radius:40px;padding:54px;color:#fff;display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;box-shadow:var(--shadow)}.cta-box h2{font-size:clamp(32px,4vw,52px);letter-spacing:-.05em;margin:0 0 12px}.cta-box p{color:#e5e7eb;line-height:1.7;margin:0;max-width:720px}.footer{background:#0b1220;color:#98a2b3;padding:46px 0}.footer-grid{display:flex;align-items:center;justify-content:space-between;gap:24px}.footer strong{color:#fff}.whatsapp{position:fixed;right:22px;bottom:22px;width:64px;height:64px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;font-size:30px;box-shadow:0 18px 42px rgba(37,211,102,.38);z-index:60}.mobile-only{display:none}
    @media (max-width:980px){.menu{display:none}.hero-grid,.flow,.cta-box{grid-template-columns:1fr}.visual{min-height:570px}.phone-card{right:0}.push{left:0}.feature-grid,.apps-grid,.testimonials-grid{grid-template-columns:1fr 1fr}.logo-cloud{grid-template-columns:repeat(3,1fr)}}
    @media (max-width:640px){.container{width:min(100% - 28px,1180px)}.nav-inner{height:70px}.brand-logo{width:145px}.nav-actions .btn-ghost{display:none}.hero{padding:52px 0}.hero-actions .btn{width:100%}.trust-row,.feature-grid,.apps-grid,.testimonials-grid{grid-template-columns:1fr}.visual{min-height:720px}.phone-card{width:285px;right:0;left:auto}.push{top:18px;width:280px}.reader{bottom:80px;width:210px}.logo-cloud{grid-template-columns:1fr 1fr}.cta-box{padding:34px}.footer-grid{display:grid}.mobile-only{display:block}}

    /* Ajustes solicitados: mockups reales, notificación iOS y CTA moderno */
    .brand-logo{height:64px;width:245px;padding:0;background:transparent;border-radius:0;box-shadow:none;object-fit:contain}
    .ios-notification{
      position:absolute;left:0;top:72px;width:335px;z-index:6;
      display:grid;grid-template-columns:42px 1fr auto;gap:12px;align-items:start;
      padding:14px 16px;border-radius:24px;
      background:rgba(246,247,250,.86);border:1px solid rgba(255,255,255,.75);
      backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);
      box-shadow:0 24px 60px rgba(16,24,40,.18);
      animation:float 5.5s ease-in-out infinite;
    }
    .ios-notification .ios-app-icon{
      width:52px;height:52px;border-radius:10px;background:#fff;object-fit:contain;padding:8px;
      box-shadow:inset 0 0 0 1px rgba(16,24,40,.08);
    }
    .ios-notification .ios-title{display:flex;gap:8px;align-items:center;font-size:12px;font-weight:800;color:#667085;text-transform:uppercase;letter-spacing:.02em}
    .ios-notification .ios-title b{color:#344054}
    .ios-notification .ios-time{font-size:12px;color:#98a2b3;font-weight:700}
    .ios-notification .ios-text{grid-column:2/4;margin-top:-32px;font-size:14px;line-height:1.35;color:#101828;font-weight:800}
    .ios-notification .ios-sub{display:block;margin-top:3px;color:#667085;font-weight:600}
    .phone-card.is-real{padding:12px;background:#0b0f19;transform:none;overflow:hidden}
    .phone-card.is-real .phone-screen{padding:0;min-height:auto;background:#fff}
    .hero-phone-img{width:100%;height:650px;object-fit:cover;object-position:top center;border-radius:34px}
    .apps-grid.roles-grid{grid-template-columns:repeat(5,1fr)}
    .app-card.role-card{transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;}
    .app-card.role-card:hover{transform:translateY(-12px) scale(1.025) scale(1.03);box-shadow:0 34px 90px rgba(0,0,0,.34);border-color:rgba(255,198,39,.65)}
    .role-card .app-shot{height:320px;background:radial-gradient(circle at 50% 25%,rgba(255,198,39,.22),transparent 38%),linear-gradient(145deg,#172033,#0b1220);padding:20px;}
    .role-card .app-shot img{height:100%;width:auto;max-width:100%;object-fit:contain;border-radius:28px;filter:drop-shadow(0 18px 30px rgba(0,0,0,.35));transition:transform .3s ease}
    .role-card:hover .app-shot img{transform:translateY(-8px) scale(1.06)}
    .cta{background:#f4f8ff}
    .cta-box.smart-cta{
      position:relative;overflow:hidden;min-height:430px;
      grid-template-columns:1.05fr .95fr;
      background:
        radial-gradient(circle at 74% 20%,rgba(255,198,39,.18),transparent 30%),
        linear-gradient(135deg,#06172f 0%,#0b2a59 55%,#1469d8 100%);
      border-radius:34px;padding:54px;box-shadow:0 28px 80px rgba(6,23,47,.25);
    }
    .smart-cta h2{font-size:clamp(40px,5vw,64px);line-height:.98;letter-spacing:-.06em;color:#fff;margin:0 0 20px}
    .smart-cta h2 span{color:#ffc627;display:block}
    .smart-cta p{font-size:18px;max-width:620px;color:#e7efff}
    .smart-bullets{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px;max-width:560px}
    .smart-bullets span{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.1);border-radius:18px;padding:14px 16px;color:#fff;font-weight:850}
    .smart-visual{position:relative;min-height:330px}
    .smart-phone{position:absolute;right:20px;top:0;width:190px;transform:rotate(8deg);border:10px solid #101828;border-radius:32px;box-shadow:0 20px 52px rgba(0,0,0,.35);overflow:hidden;background:#fff}
    .smart-phone img{width:100%;height:340px;object-fit:cover;object-position:top center}
    .smart-reader{position:absolute;left:20px;top:85px;width:190px;height:245px;border-radius:30px;background:#111827;box-shadow:0 28px 70px rgba(0,0,0,.35);transform:rotate(-7deg);display:grid;place-items:center;color:#22c55e}
    .smart-reader:before{content:"";position:absolute;inset:22px;border:2px solid rgba(34,197,94,.6);border-radius:20px;clip-path:polygon(0 0,38% 0,38% 10%,10% 10%,10% 38%,0 38%,0 0,100% 0,100% 38%,90% 38%,90% 10%,62% 10%,62% 0,100% 0,100% 100%,62% 100%,62% 90%,90% 90%,90% 62%,100% 62%,100% 100%,0 100%,0 62%,10% 62%,10% 90%,38% 90%,38% 100%,0 100%)}
    .smart-face{width:78px;height:78px;border:4px solid rgba(255,255,255,.75);border-radius:50%;display:grid;place-items:center;font-size:32px;color:#fff}
    .smart-scan{position:absolute;left:35px;right:35px;top:88px;height:4px;border-radius:999px;background:linear-gradient(90deg,transparent,#22c55e,transparent);animation:scanCta 2.2s infinite linear}
    @keyframes scanCta{0%{transform:translateY(-26px)}100%{transform:translateY(80px)}}
    .footer{background:linear-gradient(180deg,#07111f,#030712);color:#aeb8c8;padding:64px 0 34px}
    .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px;align-items:start}
    .footer-logo-white{width:210px;height:auto;margin-bottom:16px}
    .footer strong{color:#fff}
    @media (max-width:1100px){.apps-grid.roles-grid{grid-template-columns:repeat(2,1fr)}}
    @media (max-width:980px){.cta-box.smart-cta{grid-template-columns:1fr}.smart-visual{min-height:360px}}
    @media (max-width:640px){.brand-logo{width:170px;height:50px}.ios-notification{width:285px;top:20px}.hero-phone-img{height:580px}.apps-grid.roles-grid{grid-template-columns:1fr}.smart-bullets{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}}

  
.ios-app-icon{
 background:#fff !important;
 border:2px solid #fff !important;
 border-radius:12px !important;
}
.ios-notification{
 border:2px solid #ffffff !important;
}
.phone-card.is-real,
.role-card .app-shot img,
.smart-phone{
 border-color:#ffffff !important;
}
.push,.ios-notification{
 animation:pulseScale 4s ease-in-out infinite !important;
}
@keyframes pulseScale{
 0%,100%{transform:scale(1);}
 50%{transform:scale(1.05);}
}


/* Ajustes finales solicitados v3 */
.ios-notification .ios-app-icon,
.ios-app-icon{
  background:#fff !important;
  border:2px solid #fff !important;
  border-radius:12px !important;
  object-fit:contain !important;
  padding:5px !important;
}
.ios-notification{
  border:2px solid #ffffff !important;
}

.app-card.role-card:hover{

}
.role-card:hover .app-shot img{
  transform:translateY(-8px) scale(1.06) !important;
}

/* Footer moderno v3 */
.footer{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 0%, rgba(255,198,39,.18), transparent 34%),
    radial-gradient(circle at 88% 12%, rgba(46,123,176,.22), transparent 38%),
    linear-gradient(135deg,#030712 0%,#07111f 52%,#0b2a59 100%) !important;
  padding:76px 0 34px !important;
  color:#c8d2e3 !important;
}
.footer:before{
  content:"";
  position:absolute;
  inset:18px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:34px;
  pointer-events:none;
}
.footer-grid{
  position:relative;
  z-index:1;
  display:grid !important;
  grid-template-columns:1.35fr .9fr .9fr !important;
  gap:30px !important;
  align-items:start !important;
}
.footer strong{color:#fff !important;}
.footer-logo-white{
  width:220px;
  height:auto;
  margin:0 0 18px;
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.35));
}
.footer-brand-copy{
  max-width:420px;
  line-height:1.7;
  color:#aeb8c8;
  margin:0;
}
.footer-card{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  border-radius:24px;
  padding:22px;
  backdrop-filter:blur(14px);
}
.footer-card h4{
  margin:0 0 14px;
  color:#fff;
  font-size:16px;
}
.footer-card a,
.footer-card span{
  display:block;
  color:#c8d2e3;
  margin:10px 0;
  font-weight:700;
}
.footer-card a:hover{
  color:#ffc627;
}
.footer-bottom{
  position:relative;
  z-index:1;
  margin-top:34px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.1);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  color:#91a0b8;
  font-size:14px;
}
.footer-badges{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.footer-badges span{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  border-radius:999px;
  padding:8px 12px;
  color:#e8eef8;
  font-weight:800;
}

/* Botón subir */
.back-to-top{
  position:fixed;
  right:22px;
  bottom:100px;
  width:56px;
  height:56px;
  border-radius:18px;
  background:linear-gradient(135deg,#ffc627,#ffdf6b);
  color:#101828;
  display:grid;
  place-items:center;
  font-size:24px;
  font-weight:900;
  box-shadow:0 18px 42px rgba(255,198,39,.38);
  z-index:80;
  opacity:0;
  transform:translateY(16px);
  pointer-events:none;
  transition:.28s ease;
}
.back-to-top.is-visible{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.back-to-top:hover{
  transform:translateY(-4px) scale(1.04);
}
@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr !important;}
  .footer-bottom{display:grid;}
}


/* ── Carousel: Una app para cada rol ── */
.roles-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
}
.carousel-viewport {
  overflow: hidden;
  flex: 1;
  min-width: 0;
}
.apps-grid.roles-grid {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 20px;
  transition: transform 0.42s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.apps-grid.roles-grid .app-card.role-card {
  flex: 0 0 calc((100% - 40px) / 3);
  min-width: 0;
}
.carousel-btn {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: .22s ease;
  z-index: 2;
  line-height: 1;
}
.carousel-btn:hover {
  background: rgba(255,255,255,.28);
  transform: scale(1.08);
}
.carousel-btn:disabled {
  opacity: 0.28;
  cursor: default;
  transform: none;
}
@media (max-width:980px) {
  .apps-grid.roles-grid .app-card.role-card { flex: 0 0 calc((100% - 20px) / 2); }
}
@media (max-width:640px) {
  .apps-grid.roles-grid .app-card.role-card { flex: 0 0 100%; }
  .carousel-btn { width: 36px; height: 36px; flex: 0 0 36px; font-size: 16px; }
  .roles-carousel { gap: 8px; }
}

/* ── iPhone mockup – sección Del lector al celular ── */
.iphone-mockup-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}
.iphone-frame {
  width: 270px;
  background: #1b1b2e;
  border-radius: 50px;
  padding: 14px 12px 22px;
  box-shadow: 0 44px 100px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.08), inset 0 0 0 2px #2c2c42;
  position: relative;
}
.iphone-notch {
  width: 114px;
  height: 30px;
  background: #1b1b2e;
  border-radius: 0 0 22px 22px;
  margin: 0 auto 6px;
}
.iphone-screen {
  border-radius: 38px;
  overflow: hidden;
  background: #fff;
  line-height: 0;
}
.iphone-screen img {
  width: 100%;
  height: 530px;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* ── Facial reader terminal (hero) – Hikvision MinMoe style ── */
.reader{
  position:absolute;left:18px;bottom:46px;width:185px;
  background:none;border:none;border-radius:0;padding:0;
  box-shadow:none;
  animation:float 6s ease-in-out infinite reverse;
}
.reader-terminal{
  background:linear-gradient(175deg,#1e2636 0%,#0c1018 100%);
  border-radius:22px;
  padding:16px 14px 14px;
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 28px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(30,90,150,.2), inset 0 1px 0 rgba(255,255,255,.06);
}
.reader-cam-row{
  display:flex;justify-content:center;margin-bottom:12px;
}
.reader-dot-cam{
  width:13px;height:13px;border-radius:50%;
  background:#060a12;border:2px solid #1d2a42;display:block;
  box-shadow:0 0 0 3px rgba(30,90,150,.2), inset 0 0 5px rgba(10,110,207,.8);
}
.reader-screen{
  background:radial-gradient(circle at 50% 28%,rgba(30,90,150,.38) 0%,transparent 60%),#05080f;
  border-radius:12px;height:140px;
  position:relative;overflow:hidden;
  border:1px solid rgba(30,90,150,.25);
  display:grid;place-items:center;
}
.reader .reader-face{
  height:auto;background:none;font-size:52px;opacity:.6;
  border-radius:0;position:relative;z-index:1;
}
.reader-face-frame{
  position:absolute;inset:12px 16px;
  border:2px solid rgba(34,197,94,.5);border-radius:10px;
  clip-path:polygon(0 0,30% 0,30% 10%,10% 10%,10% 30%,0 30%,0 0,
    100% 0,100% 30%,90% 30%,90% 10%,70% 10%,70% 0,100% 0,
    100% 100%,70% 100%,70% 90%,90% 90%,90% 70%,100% 70%,100% 100%,
    0 100%,0 70%,10% 70%,10% 90%,30% 90%,30% 100%,0 100%);
  pointer-events:none;z-index:2;
}
.reader .scan{
  position:absolute;left:0;right:0;top:0;height:4px;margin-top:0;
  background:linear-gradient(90deg,transparent,var(--green),transparent);
  border-radius:999px;animation:scan 2.5s linear infinite;z-index:3;
}
.reader-leds{
  display:flex;justify-content:center;gap:10px;margin-top:12px;
}
.reader-leds span{width:8px;height:8px;border-radius:50%;display:block;}
.reader-leds span:first-child{
  background:#22c55e;box-shadow:0 0 8px #22c55e;
  animation:blink 2.4s infinite;
}
.reader-leds span:last-child{
  background:#3b82f6;box-shadow:0 0 8px #3b82f6;
  animation:blink 2.4s 1.2s infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.reader small{
  display:block;margin-top:10px;
  color:#667085;font-weight:800;font-size:12px;text-align:center;
}
@media(max-width:640px){
  .reader{bottom:80px;width:165px;}
}