:root{
  --blue:#1454ff;
  --dark:#071026;
  --text:#536078;
  --line:#e8edf6;
  --shadow:0 28px 75px rgba(12,35,90,.12);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--dark);
  background:#fff;
}
a{text-decoration:none;color:inherit}
.page{
  width:min(1390px,100%);
  margin:0 auto;
  background:#fff;
  min-height:100vh;
}
.wrap{width:min(1280px,92%);margin:auto}

header{
  height:92px;
  display:flex;
  align-items:center;
  border-bottom:1px solid var(--line);
  background:#fff;
}
nav{
  width:min(1280px,92%);
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand{
  display:flex;
  align-items:center;
  gap:15px;
  font-weight:950;
  font-size:24px;
  letter-spacing:-.04em;
}
.brand img{width:62px;height:auto;display:block}
.links{
  display:flex;
  align-items:center;
  gap:43px;
  font-size:16px;
  font-weight:760;
  color:#121a2e;
}
.nav-actions{
  display:flex;
  align-items:center;
  gap:16px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:999px;
  font-weight:850;
  transition:.2s ease;
  white-space:nowrap;
}
.btn.primary{
  background:var(--blue);
  color:#fff;
  padding:18px 32px;
  box-shadow:0 18px 40px rgba(20,84,255,.23);
}
.btn.secondary{
  color:var(--blue);
  border:1px solid #c9d7ff;
  background:white;
  padding:17px 31px;
}
.menu{
  width:54px;
  height:54px;
  border-radius:18px;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:0 12px 30px rgba(7,16,38,.08);
  display:grid;
  place-items:center;
  font-size:27px;
  font-weight:900;
}

/* HERO EXACT STYLE */
.hero{
  position:relative;
  min-height:820px;
  background:
    radial-gradient(ellipse at 81% 37%, rgba(232,241,255,.95) 0%, rgba(232,241,255,.72) 34%, rgba(232,241,255,0) 62%),
    #fff;
  overflow:hidden;
}
.hero-inner{
  width:min(1280px,92%);
  margin:auto;
  display:grid;
  grid-template-columns:45% 55%;
  min-height:730px;
  position:relative;
}
.hero-copy{
  padding-top:76px;
  z-index:4;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border-radius:999px;
  background:#f3f7ff;
  border:1px solid #dce7ff;
  color:var(--blue);
  font-weight:850;
  font-size:15px;
  box-shadow:0 12px 28px rgba(20,84,255,.05);
}
h1{
  margin:30px 0 25px;
  font-size:76px;
  line-height:.95;
  letter-spacing:-.078em;
  font-weight:950;
}
h1 .blue{color:var(--blue)}
.lead{
  margin:0;
  max-width:560px;
  font-size:20px;
  line-height:1.62;
  color:var(--text);
  font-weight:470;
}
.lead strong{
  color:var(--blue);
  font-weight:900;
}
.actions{
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  margin:34px 0 48px;
}
.micro-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
  max-width:670px;
}
.micro{
  display:grid;
  grid-template-columns:58px 1fr;
  gap:14px;
  align-items:center;
}
.micro-icon{
  width:58px;
  height:58px;
  border-radius:17px;
  display:grid;
  place-items:center;
  font-size:27px;
  background:#eef4ff;
  color:var(--blue);
}
.micro:nth-child(2) .micro-icon{background:#eafff2}
.micro:nth-child(3) .micro-icon{background:#f3edff}
.micro b{
  display:block;
  font-size:20px;
  line-height:1.05;
  font-weight:900;
  letter-spacing:-.04em;
}
.micro span{
  display:block;
  margin-top:4px;
  font-size:14px;
  line-height:1.25;
  color:var(--text);
  font-weight:650;
}

/* Right visual */
.hero-visual{
  position:relative;
  min-height:730px;
}
.computer{
  position:absolute;
  top:48px;
  right:-36px;
  width:770px;
  z-index:2;
  filter:drop-shadow(0 28px 35px rgba(5,13,30,.22));
}
.computer-screen{
  position:relative;
  aspect-ratio:16/9.7;
  border:16px solid #0a101d;
  border-bottom:30px solid #151b25;
  border-radius:27px 27px 20px 20px;
  background:#fff;
  overflow:hidden;
}
.computer-screen:before{
  content:"";
  position:absolute;
  top:-10px;
  left:50%;
  transform:translateX(-50%);
  width:8px;
  height:8px;
  border-radius:50%;
  background:#1d2638;
  z-index:3;
}
.computer-screen img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:left center;
  display:block;
}
.computer-base{
  height:29px;
  margin:0 44px;
  background:linear-gradient(180deg,#d8dee8,#929cab);
  border-radius:0 0 44px 44px;
  box-shadow:0 18px 34px rgba(7,16,38,.18);
}
.phone{
  position:absolute;
  z-index:5;
  width:235px;
  left:210px;
  top:275px;
  border:8px solid #03060c;
  border-radius:39px;
  overflow:hidden;
  background:#03060c;
  box-shadow:0 26px 58px rgba(7,16,38,.32);
}
.phone:before{
  content:"";
  position:absolute;
  top:7px;
  left:50%;
  transform:translateX(-50%);
  width:88px;
  height:25px;
  border-radius:999px;
  background:#03060c;
  z-index:3;
}
.phone img{
  width:100%;
  aspect-ratio:9/19.55;
  object-fit:cover;
  object-position:top center;
  display:block;
}
.notify-card{
  position:absolute;
  z-index:6;
  right:6px;
  top:475px;
  width:300px;
  background:rgba(255,255,255,.95);
  border:1px solid var(--line);
  box-shadow:0 25px 65px rgba(12,35,90,.13);
  backdrop-filter:blur(12px);
  border-radius:23px;
  padding:18px 20px;
  display:grid;
  grid-template-columns:56px 1fr;
  gap:14px;
  align-items:center;
}
.notify-icon{
  width:56px;
  height:56px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:#eef4ff;
  color:var(--blue);
  font-size:27px;
}
.notify-card b{
  display:block;
  font-size:20px;
  line-height:1.05;
  letter-spacing:-.045em;
  font-weight:930;
}
.notify-card span{
  display:block;
  margin-top:6px;
  color:var(--text);
  font-size:15px;
  line-height:1.35;
  font-weight:600;
}

/* Trust strip */
.trust-wrap{
  position:relative;
  z-index:8;
  margin-top:-10px;
}
.trust-strip{
  width:min(1280px,92%);
  margin:0 auto;
  background:rgba(255,255,255,.94);
  border:1px solid var(--line);
  border-radius:30px;
  box-shadow:0 24px 60px rgba(12,35,90,.08);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  overflow:hidden;
}
.trust{
  display:grid;
  grid-template-columns:72px 1fr;
  gap:22px;
  align-items:center;
  padding:28px 36px;
  min-height:118px;
}
.trust + .trust{border-left:1px solid var(--line)}
.trust-icon{
  width:70px;
  height:70px;
  border-radius:22px;
  display:grid;
  place-items:center;
  font-size:32px;
  background:#f0f5ff;
}
.trust b{
  display:block;
  font-size:21px;
  letter-spacing:-.04em;
  margin-bottom:5px;
  font-weight:920;
}
.trust p{
  margin:0;
  color:var(--text);
  font-size:15.5px;
  line-height:1.4;
}

/* Rest of page */
section.content{padding:78px 0}
.section-card{
  background:white;
  border:1px solid var(--line);
  border-radius:34px;
  box-shadow:0 24px 70px rgba(15,45,110,.07);
  padding:50px;
}
.center{text-align:center}
.section-title{
  margin:0 0 12px;
  font-size:44px;
  line-height:1.05;
  letter-spacing:-.055em;
}
.section-lead{
  margin:0 auto;
  max-width:740px;
  font-size:18px;
  color:var(--text);
  line-height:1.55;
}
.features{
  margin-top:40px;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:18px;
}
.feature{
  border:1px solid var(--line);
  border-radius:24px;
  padding:28px 18px;
  min-height:205px;
}
.f-icon{
  width:64px;
  height:64px;
  margin:0 auto 18px;
  border-radius:22px;
  display:grid;
  place-items:center;
  font-size:30px;
  background:#eafff2;
}
.feature:nth-child(2) .f-icon{background:#fff0dc}
.feature:nth-child(3) .f-icon{background:#f2e8ff}
.feature:nth-child(4) .f-icon{background:#eaf1ff}
.feature:nth-child(5) .f-icon{background:#ffe8f4}
.feature:nth-child(6) .f-icon{background:#e7fff1}
.feature h3{
  margin:0 0 10px;
  font-size:18px;
  letter-spacing:-.03em;
}
.feature p{
  margin:0;
  color:var(--text);
  font-size:15px;
  line-height:1.45;
}
.screens{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-top:38px;
}
.screen-card{
  border:1px solid var(--line);
  border-radius:28px;
  overflow:hidden;
  background:white;
  box-shadow:0 18px 48px rgba(15,45,110,.07);
}
.screen-card img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  object-position:top left;
  display:block;
}
.screen-card div{padding:24px}
.screen-card h3{margin:0 0 8px;font-size:22px}
.screen-card p{margin:0;color:var(--text);line-height:1.5}
.cta{
  background:linear-gradient(135deg,var(--blue),#092bb7);
  color:white;
  border-radius:34px;
  padding:46px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}
.cta h2{margin:0 0 10px;font-size:40px;letter-spacing:-.055em}
.cta p{margin:0;color:#dfe7ff;font-size:18px}
.cta .btn{background:#fff;color:var(--blue)}
footer{
  padding:42px 0;
  color:#7a8497;
}
footer .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
footer .brand img{width:48px}

@media(max-width:1100px){
  .hero-inner{grid-template-columns:1fr;min-height:auto}
  .hero-copy{padding-top:50px}
  .hero-visual{min-height:650px}
  .computer{left:50%;right:auto;transform:translateX(-50%);width:760px}
  .phone{left:45%;top:280px}
  .notify-card{right:6%;top:500px}
  .trust-strip{grid-template-columns:1fr}
  .trust + .trust{border-left:0;border-top:1px solid var(--line)}
  .features{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  .links{display:none}
  header{height:76px}
  nav{height:76px}
  .brand img{width:46px}
  .brand{font-size:20px}
  .btn.primary{padding:14px 18px}
  .hero{padding-bottom:20px}
  h1{font-size:56px}
  .lead{font-size:18px}
  .actions{margin-bottom:34px}
  .micro-row{grid-template-columns:1fr;gap:18px}
  .hero-visual{min-height:570px;overflow:hidden}
  .computer{width:690px;left:60%;top:22px}
  .phone{width:205px;left:43%;top:270px}
  .notify-card{position:relative;top:auto;right:auto;width:100%;margin:490px auto 0}
  .trust-wrap{margin-top:18px}
  .trust-strip{width:92%}
  .features,.screens{grid-template-columns:1fr}
  .section-card{padding:34px 22px}
  .cta{display:block;text-align:center;padding:36px 24px}
  .cta .btn{margin-top:22px}
  footer .wrap{display:block;text-align:center}
  footer .brand{justify-content:center;margin-bottom:14px}
}

/* ===== HERO FINAL V14: imagen integrada, sin duplicar laptop/celular ===== */
.hero{
  min-height:720px !important;
  background:#fff !important;
  position:relative !important;
  overflow:hidden !important;
}
.hero-grid{
  min-height:650px !important;
  display:grid !important;
  grid-template-columns:44% 56% !important;
  align-items:center !important;
  gap:20px !important;
  width:min(1280px,92%) !important;
  margin:auto !important;
}
.copy{
  padding-top:16px !important;
  position:relative !important;
  z-index:3 !important;
}
.hero .pill{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:10px 16px !important;
  border-radius:999px !important;
  background:#f3f7ff !important;
  border:1px solid #dfe8ff !important;
  color:var(--blue) !important;
  font-size:15px !important;
  font-weight:850 !important;
  box-shadow:0 8px 22px rgba(20,84,255,.05) !important;
}
.hero h1{
  margin:30px 0 25px !important;
  font-size:72px !important;
  line-height:.95 !important;
  letter-spacing:-.078em !important;
  font-weight:950 !important;
}
.hero h1 span{color:var(--blue) !important}
.hero .lead{
  margin:0 !important;
  max-width:555px !important;
  color:var(--text) !important;
  font-size:19px !important;
  line-height:1.62 !important;
  font-weight:470 !important;
}
.hero .lead strong{
  color:var(--blue) !important;
  font-weight:900 !important;
}
.hero .actions{
  display:flex !important;
  gap:22px !important;
  flex-wrap:wrap !important;
  margin:34px 0 46px !important;
}
.hero .benefits{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:30px !important;
  max-width:650px !important;
}
.hero .benefit{
  display:grid !important;
  grid-template-columns:54px 1fr !important;
  gap:13px !important;
  align-items:center !important;
}
.hero .bicon{
  width:54px !important;
  height:54px !important;
  border-radius:17px !important;
  background:#eef4ff !important;
  display:grid !important;
  place-items:center !important;
  font-size:25px !important;
}
.hero .benefit:nth-child(2) .bicon{background:#eafff2 !important}
.hero .benefit:nth-child(3) .bicon{background:#f3edff !important}
.hero .benefit b{
  display:block !important;
  font-size:19px !important;
  line-height:1.05 !important;
  letter-spacing:-.04em !important;
}
.hero .benefit span{
  display:block !important;
  color:var(--text) !important;
  font-size:13.5px !important;
  line-height:1.25 !important;
  font-weight:650 !important;
  margin-top:3px !important;
}
.visual{
  position:relative !important;
  min-height:650px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#fff !important;
}
.hero-device{
  width:760px !important;
  max-width:112% !important;
  height:auto !important;
  display:block !important;
  object-fit:contain !important;
  transform:translateX(12px) !important;
  mix-blend-mode:multiply !important;
  background:transparent !important;
  filter:drop-shadow(0 24px 40px rgba(7,16,38,.08)) !important;
}

/* Strip de v11 */
.strip{
  margin:-8px auto 0 !important;
  width:min(1280px,92%) !important;
  border:1px solid var(--line) !important;
  background:rgba(255,255,255,.96) !important;
  border-radius:29px !important;
  box-shadow:0 22px 58px rgba(12,35,90,.075) !important;
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  overflow:hidden !important;
  position:relative !important;
  z-index:10 !important;
}
.strip-item{
  display:grid !important;
  grid-template-columns:68px 1fr !important;
  gap:20px !important;
  align-items:center !important;
  padding:27px 34px !important;
  min-height:116px !important;
}
.strip-item + .strip-item{border-left:1px solid var(--line) !important}
.sicon{
  width:66px !important;
  height:66px !important;
  border-radius:21px !important;
  background:#eff5ff !important;
  display:grid !important;
  place-items:center !important;
  font-size:30px !important;
}
.strip b{
  display:block !important;
  font-size:20px !important;
  letter-spacing:-.04em !important;
  margin-bottom:4px !important;
}
.strip p{
  margin:0 !important;
  color:var(--text) !important;
  font-size:15px !important;
  line-height:1.38 !important;
}

/* Sección funciones: forzar el estilo de tarjetas como en tu referencia */
#funciones.section-card,
#funciones .section-card,
section#funciones .section-card{
  background:white !important;
  border:1px solid var(--line) !important;
  border-radius:34px !important;
  box-shadow:0 24px 70px rgba(15,45,110,.07) !important;
  padding:50px !important;
  text-align:center !important;
}
#funciones .features{
  margin-top:40px !important;
  display:grid !important;
  grid-template-columns:repeat(6,1fr) !important;
  gap:18px !important;
}
#funciones .feature{
  border:1px solid var(--line) !important;
  border-radius:24px !important;
  padding:28px 18px !important;
  min-height:205px !important;
  text-align:center !important;
  background:white !important;
}
#funciones .f-icon{
  width:64px !important;
  height:64px !important;
  margin:0 auto 18px !important;
  border-radius:22px !important;
  display:grid !important;
  place-items:center !important;
  font-size:30px !important;
  background:#eafff2 !important;
}
#funciones .feature:nth-child(2) .f-icon{background:#fff0dc !important}
#funciones .feature:nth-child(3) .f-icon{background:#f2e8ff !important}
#funciones .feature:nth-child(4) .f-icon{background:#eaf1ff !important}
#funciones .feature:nth-child(5) .f-icon{background:#ffe8f4 !important}
#funciones .feature:nth-child(6) .f-icon{background:#e7fff1 !important}
#funciones .feature h3{
  margin:0 0 10px !important;
  font-size:18px !important;
  letter-spacing:-.03em !important;
}
#funciones .feature p{
  margin:0 !important;
  color:var(--text) !important;
  font-size:15px !important;
  line-height:1.45 !important;
}

@media(max-width:1000px){
  .hero-grid{
    grid-template-columns:1fr !important;
    min-height:auto !important;
    padding:55px 0 20px !important;
  }
  .visual{min-height:auto !important;margin-top:20px !important}
  .hero-device{width:100% !important;max-width:760px !important;transform:none !important}
  .strip{grid-template-columns:1fr !important;margin-top:25px !important}
  .strip-item + .strip-item{border-left:0 !important;border-top:1px solid var(--line) !important}
  #funciones .features{grid-template-columns:repeat(2,1fr) !important}
}
@media(max-width:650px){
  .hero h1{font-size:55px !important}
  .hero .lead{font-size:17px !important}
  .hero .benefits{grid-template-columns:1fr !important;gap:18px !important}
  .btn.secondary,.btn.primary{width:100% !important}
  #funciones .features{grid-template-columns:1fr !important}
}




/* ===== v1.0.1 NAV AJUSTES FINOS ===== */
/* 1) Separar mejor la barra superior del resto de la página */
header,
.header{
  height:86px !important;
  background:#fff !important;
  border-bottom:1px solid #e9eef7 !important;
  box-shadow:0 8px 26px rgba(15,23,42,.035) !important;
  position:relative !important;
  z-index:50 !important;
}

nav,
.nav{
  height:86px !important;
  width:min(1280px,92%) !important;
  margin:0 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
}

/* 2) Mantener logo de esquina superior izquierda como está, solo asegurar proporción */
.brand{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  font-weight:950 !important;
  font-size:24px !important;
  letter-spacing:-.04em !important;
}
.brand img{
  width:60px !important;
  height:auto !important;
  display:block !important;
}

/* 3) Menú central más fino, como referencia */
.links{
  display:flex !important;
  align-items:center !important;
  gap:42px !important;
  font-size:15px !important;
  font-weight:650 !important;
  color:#11182d !important;
  letter-spacing:-.01em !important;
}
.links a{
  font-weight:650 !important;
}

/* 4) Botón Agendar demo más pequeño y limpio */
.nav-actions{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
}
.nav-actions .btn.primary,
.nav-actions .btn-primary,
header .btn.primary,
.header .btn-primary{
  padding:14px 28px !important;
  min-height:48px !important;
  border-radius:999px !important;
  font-size:15px !important;
  font-weight:800 !important;
  background:#1454ff !important;
  color:#fff !important;
  box-shadow:none !important;
}

/* 5) Hamburguesa más pequeña y elegante */
.menu{
  width:48px !important;
  height:48px !important;
  border-radius:16px !important;
  border:1px solid #e8edf7 !important;
  background:#fff !important;
  box-shadow:0 10px 24px rgba(7,16,38,.075) !important;
  font-size:23px !important;
  font-weight:850 !important;
  line-height:1 !important;
}

/* Compensar el hero para que no quede pegado al navbar */
.hero{
  padding-top:10px !important;
}

@media(max-width:760px){
  header,
  .header,
  nav,
  .nav{
    height:76px !important;
  }
  .brand img{
    width:46px !important;
  }
  .brand{
    font-size:20px !important;
  }
  .links{
    display:none !important;
  }
  .nav-actions .btn.primary,
  .nav-actions .btn-primary,
  header .btn.primary,
  .header .btn-primary{
    padding:12px 18px !important;
    min-height:44px !important;
    font-size:14px !important;
  }
  .menu{
    width:44px !important;
    height:44px !important;
    border-radius:15px !important;
    font-size:21px !important;
  }
}



/* ===== v1.0.7 TÍTULO COMO REFERENCIA ===== */
/* Carga una fuente más parecida al boceto: menos redonda y más premium */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@650;700;750;800&display=swap');

/* Título principal: más delgado, menos redondo y con aire similar a la referencia */
.hero h1,
.hero-title,
.copy h1,
h1 {
  font-family:"Inter Tight","Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  font-weight:700 !important;
  letter-spacing:-0.062em !important;
  line-height:.96 !important;
  text-rendering:geometricPrecision !important;
  -webkit-font-smoothing:antialiased !important;
  font-synthesis-weight:none !important;
}

.hero h1 span,
.hero-title span,
.copy h1 span,
h1 span,
h1 .blue {
  font-family:"Inter Tight","Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  font-weight:700 !important;
}

/* Botón superior Agendar demo: mantener sin sombra, definitivo */
header .btn,
header .btn.primary,
header .btn-primary,
.header .btn,
.header .btn.primary,
.header .btn-primary,
nav .btn,
nav .btn.primary,
nav .btn-primary,
.nav .btn,
.nav .btn.primary,
.nav .btn-primary,
.nav-actions .btn,
.nav-actions .btn.primary,
.nav-actions .btn-primary {
  box-shadow:none !important;
  filter:none !important;
  text-shadow:none !important;
}



/* ===== v1.0.8 HERO 3D: visual más parecido a referencia ===== */
/* Mantener todos los ajustes aprobados y solo ajustar escena derecha */
.hero{
  overflow:visible !important;
  background:#fff !important;
}

.hero-grid,
.hero-inner{
  overflow:visible !important;
}

/* El contenedor derecho deja que la imagen "salga" visualmente */
.visual,
.hero-visual{
  overflow:visible !important;
  position:relative !important;
  isolation:isolate !important;
}

/* Mancha azul suave detrás, como referencia */
.visual::before,
.hero-visual::before{
  content:"" !important;
  position:absolute !important;
  width:720px !important;
  height:520px !important;
  right:-58px !important;
  top:50px !important;
  border-radius:50% !important;
  background:radial-gradient(ellipse at center, rgba(235,244,255,.98) 0%, rgba(235,244,255,.74) 42%, rgba(235,244,255,0) 72%) !important;
  z-index:-1 !important;
  pointer-events:none !important;
}

/* La imagen integrada se agranda y se mueve como la referencia:
   laptop más protagonista, celular sale hacia abajo y no se siente encerrada en rectángulo */
.hero-device{
  width:890px !important;
  max-width:none !important;
  transform:translateX(-52px) translateY(-2px) scale(1.02) !important;
  transform-origin:center center !important;
  mix-blend-mode:multiply !important;
  background:transparent !important;
  filter:
    drop-shadow(0 34px 52px rgba(7,16,38,.13))
    drop-shadow(0 12px 22px rgba(7,16,38,.06)) !important;
  position:relative !important;
  z-index:2 !important;
}

/* Si el HTML usa nombres anteriores */
.hero-image img,
.hero-right img{
  mix-blend-mode:multiply !important;
}

/* Tarjeta inferior debe quedar por encima si el visual baja */
.strip,
.trust-wrap,
.trust-strip{
  position:relative !important;
  z-index:8 !important;
}

/* Mantener botón superior sin sombra */
header .btn,
header .btn.primary,
header .btn-primary,
.header .btn,
.header .btn.primary,
.header .btn-primary,
nav .btn,
nav .btn.primary,
nav .btn-primary,
.nav .btn,
.nav .btn.primary,
.nav .btn-primary,
.nav-actions .btn,
.nav-actions .btn.primary,
.nav-actions .btn-primary {
  box-shadow:none !important;
  filter:none !important;
  text-shadow:none !important;
}

/* Título aprobado */
.hero h1,
.hero-title,
.copy h1,
h1 {
  font-family:"Inter Tight","Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  font-weight:700 !important;
  letter-spacing:-0.062em !important;
  line-height:.96 !important;
  text-rendering:geometricPrecision !important;
  -webkit-font-smoothing:antialiased !important;
}

@media(max-width:1000px){
  .hero-device{
    width:780px !important;
    max-width:120% !important;
    transform:translateX(-20px) scale(1) !important;
  }
  .visual::before,
  .hero-visual::before{
    width:640px !important;
    height:460px !important;
    right:-180px !important;
    top:30px !important;
  }
}

@media(max-width:650px){
  .hero{
    overflow:hidden !important;
  }
  .hero-device{
    width:680px !important;
    max-width:none !important;
    transform:translateX(-15px) scale(.96) !important;
  }
}



/* ===== v1.0.9 Fondo de imagen integrado ===== */
/* El asset hero-device.png ahora tiene fondo externo transparente.
   Esto elimina el rectángulo blanco y deja que se vea el fondo real de la página. */
.visual,
.hero-visual{
  background:transparent !important;
}

.hero-device{
  background:transparent !important;
  mix-blend-mode:normal !important;
  filter:
    drop-shadow(0 34px 52px rgba(7,16,38,.13))
    drop-shadow(0 12px 22px rgba(7,16,38,.06)) !important;
}

/* Mantener el fondo general limpio */
.hero,
.page,
body{
  background:#fff !important;
}


/* ===== v1.1.0 Ajustes solicitados ===== */

/* 1. Mover hero visual un poco hacia la izquierda */
.hero-visual,
.visual{
    transform: translateX(-55px) !important;
}

/* 2. Mantener tarjeta de notificaciones completamente blanca */
.notification-card,
.hero-notification,
.notification-widget{
    background: #ffffff !important;
    border: 1px solid rgba(15,23,42,.06) !important;
    box-shadow: 0 20px 40px rgba(15,23,42,.08) !important;
    opacity: 1 !important;
}

/* Responsive */
@media (max-width: 1024px){
    .hero-visual,
    .visual{
        transform: translateX(0) !important;
    }
}


/* ===== v1.1.1 Hero desplazado a la derecha ===== */
.hero-visual,
.visual{
    transform: translateX(45px) !important;
}

@media (max-width:1024px){
    .hero-visual,
    .visual{
        transform: translateX(0) !important;
    }
}


/* ===== v1.1.2 Tarjeta notificaciones totalmente blanca ===== */
.notification-card,
.hero-notification,
.notification-widget,
.hero-notification-card{
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    opacity: 1 !important;
    border: 1px solid rgba(226,232,240,.9) !important;
    box-shadow: 0 15px 35px rgba(15,23,42,.08) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.notification-card * ,
.hero-notification * ,
.notification-widget * ,
.hero-notification-card *{
    opacity: 1 !important;
}


/* ===== v1.1.3 Conceptos inferiores refinados ===== */
/* Mantener todos los cambios anteriores y ajustar solo los 3 conceptos del hero */

.hero .benefits,
.benefits{
    display: grid !important;
    grid-template-columns: 150px 230px 150px !important;
    gap: 34px !important;
    align-items: start !important;
    max-width: 610px !important;
}

.hero .benefit,
.benefit{
    display: grid !important;
    grid-template-columns: 54px 1fr !important;
    gap: 12px !important;
    align-items: start !important;
}

.hero .bicon,
.bicon{
    width: 52px !important;
    height: 52px !important;
    border-radius: 15px !important;
    display: grid !important;
    place-items: center !important;
    font-size: 24px !important;
    flex: 0 0 52px !important;
}

.hero .benefit:nth-child(1) .bicon,
.benefit:nth-child(1) .bicon{
    background: #eaf2ff !important;
}

.hero .benefit:nth-child(2) .bicon,
.benefit:nth-child(2) .bicon{
    background: #e9fff4 !important;
}

.hero .benefit:nth-child(3) .bicon,
.benefit:nth-child(3) .bicon{
    background: #f3eaff !important;
}

.hero .benefit b,
.benefit b{
    display: block !important;
    font-family: "Inter Tight","Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
    font-size: 17px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.035em !important;
    font-weight: 780 !important;
    color: #071026 !important;
    margin: 0 0 3px !important;
}

.hero .benefit span,
.benefit span{
    display: block !important;
    color: #536078 !important;
    font-size: 12.8px !important;
    line-height: 1.22 !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

/* Ajuste fino del segundo concepto para que respire como la referencia */
.hero .benefit:nth-child(2),
.benefit:nth-child(2){
    grid-template-columns: 54px 1fr !important;
}

/* En pantallas pequeñas no romper */
@media(max-width:900px){
    .hero .benefits,
    .benefits{
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        max-width: 100% !important;
    }
}


/* ===== v1.1.6 Beneficios sin saltos innecesarios ===== */
/* Hace más ancho el bloque de texto de cada concepto para evitar:
   "desde / el primer día" y "en un solo / lugar" */
.hero .benefits,
.benefits{
    grid-template-columns: 190px 260px 190px !important;
    gap: 28px !important;
    max-width: 720px !important;
}

.hero .benefit,
.benefit{
    grid-template-columns: 52px minmax(120px, 1fr) !important;
    gap: 12px !important;
    align-items: center !important;
}

.hero .benefit span,
.benefit span{
    white-space: nowrap !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
}

.hero .benefit:nth-child(2) span,
.benefit:nth-child(2) span{
    white-space: normal !important;
    max-width: 190px !important;
}

/* Mantener mobile sin romper */
@media(max-width:900px){
    .hero .benefits,
    .benefits{
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
    }
    .hero .benefit span,
    .benefit span{
        white-space: normal !important;
    }
}


/* v1.1.7 - tarjeta notificaciones fondo blanco */
.notification-card,
.hero-notification,
.notification-box,
.hero-notification-card{
    background:#ffffff !important;
    background-color:#ffffff !important;
    box-shadow:0 18px 45px rgba(15,23,42,.10) !important;
    border:1px solid rgba(226,232,240,.8) !important;
}


/* ===== v1.1.8 Mobile Hero Optimization ===== */
@media (max-width: 768px){

  .nav-links,
  .menu-links,
  .desktop-nav{
      display:none !important;
  }

  .header .btn-primary,
  .nav-actions .btn-primary{
      display:none !important;
  }

  .header,
  .navbar{
      padding:16px 20px !important;
  }

  .logo img{
      max-height:42px !important;
  }

  .hero,
  .hero-grid{
      display:grid !important;
      grid-template-columns:1fr !important;
      padding:30px 24px !important;
      gap:24px !important;
  }

  .hero h1,
  .hero-title{
      font-size:56px !important;
      line-height:.95 !important;
      letter-spacing:-2px !important;
  }

  .hero p{
      font-size:18px !important;
      line-height:1.7 !important;
  }

  .hero-actions,
  .actions{
      flex-direction:column !important;
      gap:16px !important;
  }

  .hero-actions a,
  .actions a,
  .hero-actions .btn,
  .actions .btn{
      width:100% !important;
      justify-content:center !important;
      text-align:center !important;
  }

  .hero-image,
  .visual{
      order:99 !important;
      margin-top:20px !important;
      transform:none !important;
  }

  .hero-image img,
  .visual img{
      width:115% !important;
      max-width:115% !important;
      margin-left:-7.5% !important;
  }

  .benefits{
      grid-template-columns:1fr !important;
      gap:18px !important;
  }

  .benefit{
      justify-content:flex-start !important;
  }
}

.pricing-section{padding:120px 0;background:#fff;text-align:center}
.pricing-title{font-size:64px;font-weight:900;letter-spacing:-.05em;margin:20px 0 10px}
.pricing-title span{color:var(--blue)}
.pricing-sub{font-size:24px;color:var(--text);margin-bottom:60px}
.pricing-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;margin-top:40px}
.plan-card{position:relative;background:#fff;border:1px solid #e7ecf8;border-radius:32px;padding:42px;text-align:left;box-shadow:0 20px 50px rgba(0,0,0,.04)}
.plan-card.featured{border:2px solid var(--blue)}
.featured-badge{position:absolute;top:-18px;left:50%;transform:translateX(-50%);background:var(--blue);color:#fff;padding:10px 24px;border-radius:999px;font-weight:800}
.plan-card h3{font-size:42px;margin:0}
.plan-desc{color:var(--text)}
.price{font-size:56px;font-weight:900;margin:25px 0}
.price small{font-size:28px;color:var(--text)}
.plan-card ul{list-style:none;padding:0;margin:0 0 30px}
.plan-card li{padding:12px 0;font-size:22px;color:#334}
.full-btn{width:100%;margin-top:20px}
@media(max-width:768px){
 .pricing-grid{grid-template-columns:1fr}
 .pricing-title{font-size:42px}
 .pricing-sub{font-size:18px}
 .price{font-size:42px}
 .plan-card li{font-size:18px}
}


/* ===== v1.2.0 Plan Pro: texto incluye básico ===== */
.pro-includes{
    margin: 0 0 14px !important;
    padding-top: 8px !important;
    color: var(--blue) !important;
    font-weight: 850 !important;
    font-size: 18px !important;
    letter-spacing: -0.02em !important;
}

.plan-card.featured ul{
    margin-top: 0 !important;
}

@media(max-width:768px){
    .pro-includes{
        font-size:16px !important;
        margin-bottom:12px !important;
    }
}


/* ===== v1.2.1 CTA final refinado ===== */
.final-cta-section{
    padding: 90px 0 110px !important;
    background: #fff !important;
}

.final-cta-card{
    width: min(1280px, 92%) !important;
    margin: 0 auto !important;
    border-radius: 36px !important;
    padding: 70px 86px !important;
    background: linear-gradient(135deg, #1558ff 0%, #0630c9 100%) !important;
    color: #fff !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 48px !important;
    align-items: center !important;
    box-shadow: 0 30px 80px rgba(21,88,255,.22) !important;
    overflow: hidden !important;
    position: relative !important;
}

.final-cta-card::after{
    content:"" !important;
    position:absolute !important;
    width:420px !important;
    height:420px !important;
    right:-160px !important;
    top:-160px !important;
    border-radius:50% !important;
    background:rgba(255,255,255,.08) !important;
}

.final-cta-copy{
    position:relative !important;
    z-index:2 !important;
}

.final-cta-copy h2{
    margin: 0 0 18px !important;
    color: #fff !important;
    font-family:"Inter Tight","Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
    font-size: 48px !important;
    line-height: .96 !important;
    letter-spacing: -0.06em !important;
    font-weight: 800 !important;
}

.final-cta-copy p{
    margin: 0 !important;
    color: rgba(255,255,255,.86) !important;
    font-size: 22px !important;
    line-height: 1.45 !important;
    max-width: 880px !important;
    font-weight: 500 !important;
}

.final-cta-button{
    position:relative !important;
    z-index:2 !important;
    background:#fff !important;
    color:#1558ff !important;
    border-radius:999px !important;
    padding: 16px 28px !important;
    font-size: 18px !important;
    font-weight: 850 !important;
    text-decoration:none !important;
    white-space: nowrap !important;
    box-shadow:none !important;
    border: 0 !important;
}

.final-cta-button:hover{
    transform: translateY(-1px) !important;
}

@media(max-width:900px){
    .final-cta-section{
        padding: 60px 0 80px !important;
    }
    .final-cta-card{
        grid-template-columns: 1fr !important;
        padding: 42px 28px !important;
        gap: 28px !important;
        border-radius: 28px !important;
    }
    .final-cta-copy h2{
        font-size: 38px !important;
    }
    .final-cta-copy p{
        font-size: 18px !important;
    }
    .final-cta-button{
        width:100% !important;
        text-align:center !important;
        display:block !important;
    }
}


/* ===== v1.2.3 Navbar limpio ===== */
/* Solo dejamos Funciones, Planes y el CTA Agendar demo */
.nav a[href*="historia"],
.nav a[href*="ux"],
.nav a[href*="demo"]:not(.btn):not(.btn-primary),
.nav a:has(> span.historia),
.header a[href*="historia"],
.header a[href*="ux"],
.header a[href*="demo"]:not(.btn):not(.btn-primary){
    display:none !important;
}

/* Ocultar hamburguesa */
.menu,
.hamburger,
.menu-toggle,
.nav-toggle,
button[aria-label*="menu"],
button[aria-label*="menú"]{
    display:none !important;
}

/* Recentrar menú y limpiar espaciado */
.links,
.nav-links,
.menu-links{
    gap:52px !important;
}

/* Mantener CTA limpio */
.nav-actions{
    gap:0 !important;
}

@media(max-width:768px){
    .menu,
    .hamburger,
    .menu-toggle,
    .nav-toggle{
        display:none !important;
    }
}


/* v1.2.7 - ocultar navegación superior */
.nav-menu,
.main-navigation,
.header-nav,
.site-nav{
  display:none !important;
}


/* ===== v1.2.9 Funciones con Ver más + detalle ventas rápidas ===== */
.feature-card,
.function-card,
.muffu-feature-card{
  position:relative !important;
}

.feature-more{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  margin-top:22px !important;
  color:#1558ff !important;
  font-weight:850 !important;
  font-size:16px !important;
  text-decoration:none !important;
  letter-spacing:-.02em !important;
}

.feature-more span{
  font-size:20px !important;
  line-height:1 !important;
  transform:translateY(1px) !important;
}

.feature-more:hover{
  transform:translateX(2px) !important;
}

/* Primera tarjeta destacada al estilo del boceto */
#funciones .feature-card:first-of-type,
#funciones .function-card:first-of-type,
#funciones .muffu-feature-card:first-of-type{
  border-color:#1558ff !important;
  box-shadow:0 18px 45px rgba(21,88,255,.10) !important;
}

.muffu-feature-detail{
  padding:28px 0 90px !important;
  background:#fff !important;
}

.feature-detail-wrap{
  width:min(1390px,92%) !important;
  margin:0 auto !important;
  border:1px solid #e7ecf8 !important;
  border-radius:34px !important;
  padding:42px !important;
  display:grid !important;
  grid-template-columns:.82fr 1.18fr !important;
  gap:42px !important;
  align-items:center !important;
  background:#fff !important;
  box-shadow:0 24px 70px rgba(15,23,42,.045) !important;
}

.back-functions{
  display:inline-flex !important;
  margin-bottom:26px !important;
  color:#1558ff !important;
  font-weight:800 !important;
  text-decoration:none !important;
}

.featured-pill{
  display:inline-flex !important;
  align-items:center !important;
  padding:8px 14px !important;
  border-radius:999px !important;
  background:#eaf8ef !important;
  color:#16833b !important;
  font-size:14px !important;
  font-weight:850 !important;
  margin-bottom:18px !important;
}

.feature-detail-head{
  display:flex !important;
  align-items:center !important;
  gap:18px !important;
  margin-bottom:18px !important;
}

.feature-detail-icon{
  width:76px !important;
  height:76px !important;
  border-radius:20px !important;
  background:#eafff2 !important;
  display:grid !important;
  place-items:center !important;
  font-size:38px !important;
  flex:0 0 76px !important;
}

.feature-detail-head h3{
  margin:0 0 6px !important;
  color:#071026 !important;
  font-size:44px !important;
  line-height:1 !important;
  letter-spacing:-.055em !important;
  font-weight:850 !important;
}

.feature-detail-head p{
  margin:0 !important;
  color:#536078 !important;
  font-size:18px !important;
  line-height:1.4 !important;
}

.feature-detail-text{
  color:#536078 !important;
  font-size:19px !important;
  line-height:1.58 !important;
  margin:0 0 26px !important;
  max-width:620px !important;
}

.feature-checks{
  list-style:none !important;
  padding:0 !important;
  margin:0 0 28px !important;
  display:grid !important;
  gap:14px !important;
}

.feature-checks li{
  position:relative !important;
  padding-left:34px !important;
  color:#1d273b !important;
  font-size:17px !important;
  font-weight:650 !important;
}

.feature-checks li::before{
  content:"✓" !important;
  position:absolute !important;
  left:0 !important;
  top:-1px !important;
  width:22px !important;
  height:22px !important;
  border-radius:50% !important;
  background:#dff8e8 !important;
  color:#169344 !important;
  display:grid !important;
  place-items:center !important;
  font-size:14px !important;
  font-weight:900 !important;
}

.feature-detail-cta{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:18px !important;
  background:#1558ff !important;
  color:#fff !important;
  text-decoration:none !important;
  padding:18px 28px !important;
  font-size:18px !important;
  font-weight:850 !important;
  box-shadow:0 20px 46px rgba(21,88,255,.22) !important;
}

.feature-detail-device{
  position:relative !important;
}

.feature-detail-device::before{
  content:"" !important;
  position:absolute !important;
  inset:34px 18px -18px 18px !important;
  border-radius:42px !important;
  background:linear-gradient(180deg, rgba(15,23,42,.16), rgba(15,23,42,.04)) !important;
  filter:blur(18px) !important;
  z-index:0 !important;
}

.feature-detail-device img{
  position:relative !important;
  z-index:1 !important;
  width:100% !important;
  display:block !important;
  border-radius:34px !important;
  border:13px solid #0d111b !important;
  box-shadow:0 32px 80px rgba(15,23,42,.18) !important;
  background:#fff !important;
}

@media(max-width:980px){
  .feature-detail-wrap{
    grid-template-columns:1fr !important;
    padding:28px !important;
  }
  .feature-detail-head h3{
    font-size:36px !important;
  }
}

@media(max-width:640px){
  .muffu-feature-detail{
    padding:20px 0 64px !important;
  }
  .feature-detail-wrap{
    width:92% !important;
    padding:22px !important;
    border-radius:26px !important;
  }
  .feature-detail-device img{
    border-width:8px !important;
    border-radius:22px !important;
  }
  .feature-detail-cta{
    width:100% !important;
  }
}


/* ===== v1.3.0 Limpieza: sin pantallas reales + CTA final al cierre ===== */

/* Fallback: si queda algún bloque antiguo de pantallas reales, ocultarlo */
section:has(.screens-grid),
section:has(.real-screens),
.real-screens,
.screens-section,
.pantallas-reales,
section[aria-label*="Pantallas reales"]{
  display:none !important;
}

/* Mantener detalle de funciones justo debajo de "Todo lo que tu negocio necesita" */
.muffu-feature-detail{
  padding-top:28px !important;
}

/* CTA final como última sección */
.final-cta-section{
    padding: 90px 0 110px !important;
    background: #fff !important;
}

.final-cta-card{
    width: min(1280px, 92%) !important;
    margin: 0 auto !important;
    border-radius: 36px !important;
    padding: 70px 86px !important;
    background: linear-gradient(135deg, #1558ff 0%, #0630c9 100%) !important;
    color: #fff !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 48px !important;
    align-items: center !important;
    box-shadow: 0 30px 80px rgba(21,88,255,.22) !important;
    overflow: hidden !important;
    position: relative !important;
}

.final-cta-card::after{
    content:"" !important;
    position:absolute !important;
    width:420px !important;
    height:420px !important;
    right:-160px !important;
    top:-160px !important;
    border-radius:50% !important;
    background:rgba(255,255,255,.08) !important;
}

.final-cta-copy{
    position:relative !important;
    z-index:2 !important;
}

.final-cta-copy h2{
    margin: 0 0 18px !important;
    color: #fff !important;
    font-family:"Inter Tight","Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
    font-size: 48px !important;
    line-height: .96 !important;
    letter-spacing: -0.06em !important;
    font-weight: 800 !important;
}

.final-cta-copy p{
    margin: 0 !important;
    color: rgba(255,255,255,.86) !important;
    font-size: 22px !important;
    line-height: 1.45 !important;
    max-width: 880px !important;
    font-weight: 500 !important;
}

.final-cta-button{
    position:relative !important;
    z-index:2 !important;
    background:#fff !important;
    color:#1558ff !important;
    border-radius:999px !important;
    padding: 16px 28px !important;
    font-size: 18px !important;
    font-weight: 850 !important;
    text-decoration:none !important;
    white-space: nowrap !important;
    box-shadow:none !important;
    border: 0 !important;
}

@media(max-width:900px){
    .final-cta-section{ padding: 60px 0 80px !important; }
    .final-cta-card{
        grid-template-columns: 1fr !important;
        padding: 42px 28px !important;
        gap: 28px !important;
        border-radius: 28px !important;
    }
    .final-cta-copy h2{ font-size: 38px !important; }
    .final-cta-copy p{ font-size: 18px !important; }
    .final-cta-button{
        width:100% !important;
        text-align:center !important;
        display:block !important;
    }
}


/* ===== v1.3.1 Botones Ver más alineados ===== */
.muffu-feature-card,
.feature-card,
.function-card{
    display:flex !important;
    flex-direction:column !important;
    height:100% !important;
}

.muffu-feature-card p,
.feature-card p,
.function-card p{
    min-height:110px !important;
}

.muffu-feature-card a,
.feature-card a,
.function-card a{
    margin-top:auto !important;
    padding-top:24px !important;
}


/* ===== v1.3.2 Ver más en la misma fila REAL ===== */
/* Aplica al bloque "Todo lo que tu negocio necesita" sin afectar otras secciones */

#funciones .feature-card,
#funciones .function-card,
#funciones .muffu-feature-card,
.muffu-functions-section .feature-card,
.muffu-functions-section .function-card,
.muffu-functions-section .muffu-feature-card,
.features-grid > div,
.functions-grid > div{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    min-height: 365px !important;
    height: 365px !important;
    box-sizing: border-box !important;
}

/* Reserva altura uniforme para títulos, incluyendo "Etiquetas con QR" que ocupa 2 líneas */
#funciones .feature-card h3,
#funciones .function-card h3,
#funciones .muffu-feature-card h3,
.muffu-functions-section .feature-card h3,
.muffu-functions-section .function-card h3,
.muffu-functions-section .muffu-feature-card h3,
.features-grid > div h3,
.functions-grid > div h3{
    min-height: 58px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin-bottom: 14px !important;
}

/* Reserva altura uniforme para las descripciones */
#funciones .feature-card p,
#funciones .function-card p,
#funciones .muffu-feature-card p,
.muffu-functions-section .feature-card p,
.muffu-functions-section .function-card p,
.muffu-functions-section .muffu-feature-card p,
.features-grid > div p,
.functions-grid > div p{
    min-height: 92px !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: center !important;
}

/* El enlace baja siempre al mismo punto */
#funciones .feature-more,
#funciones a.feature-more,
#funciones .feature-card a,
#funciones .function-card a,
#funciones .muffu-feature-card a,
.muffu-functions-section .feature-more,
.muffu-functions-section .feature-card a,
.muffu-functions-section .function-card a,
.muffu-functions-section .muffu-feature-card a,
.features-grid > div a,
.functions-grid > div a{
    margin-top: auto !important;
    padding-top: 0 !important;
    align-self: center !important;
    min-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Mobile: liberar altura fija para que no se rompa */
@media(max-width: 900px){
    #funciones .feature-card,
    #funciones .function-card,
    #funciones .muffu-feature-card,
    .muffu-functions-section .feature-card,
    .muffu-functions-section .function-card,
    .muffu-functions-section .muffu-feature-card,
    .features-grid > div,
    .functions-grid > div{
        height: auto !important;
        min-height: 320px !important;
    }
}


/* ===== v1.3.3 Detalle Inventario ===== */
.inventory-pill{
    background:#fff2df !important;
    color:#9a5a00 !important;
}

.inventory-icon{
    background:#fff2df !important;
}

.inventory-device img{
    object-fit: cover !important;
    object-position: center center !important;
}

/* El detalle de inventario usa la misma estructura premium de ventas rápidas */
#detalle-inventario{
    padding-top: 28px !important;
}


/* ===== v1.3.4 Detalle Apartados ===== */
.apartados-pill{
    background:#f1e8ff !important;
    color:#6b2ccf !important;
}

.apartados-icon{
    background:#f1e8ff !important;
}

#detalle-apartados{
    padding-top: 28px !important;
}

.apartados-device img{
    object-fit: cover !important;
    object-position: center center !important;
}


/* ===== v1.3.5 Detalle Promociones ===== */
.promociones-pill{
    background:#fff2df !important;
    color:#b65a00 !important;
}

.promociones-icon{
    background:#eef4ff !important;
}

#detalle-promociones{
    padding-top: 28px !important;
}

.promociones-device img{
    object-fit: cover !important;
    object-position: center center !important;
}


/* ===== v1.3.7 Detalle Etiquetas con QR - redo ===== */
.etiquetas-pill{
    background:#eef4ff !important;
    color:#1558ff !important;
}

.etiquetas-icon{
    background:#eef4ff !important;
}

#detalle-etiquetas-qr{
    padding-top: 28px !important;
}

.etiquetas-device img{
    object-fit: cover !important;
    object-position: center center !important;
}


/* ===== v1.3.8 Detalle Cambios / Devoluciones ===== */
.cambios-pill{
    background:#e9fff4 !important;
    color:#078c5b !important;
}
.cambios-icon{
    background:#e9fff4 !important;
}
#detalle-cambios{
    padding-top: 28px !important;
}
.cambios-device img{
    object-fit: cover !important;
    object-position: center center !important;
}


/* ===== v1.3.9 Agregar MUFFU Manager + Cargar inventario ===== */

/* Con 8 funciones, se ven mejor en 4 columnas x 2 filas */
#funciones .features{
    grid-template-columns: repeat(4, 1fr) !important;
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#funciones .feature{
    min-height: 285px !important;
}

/* Colores de iconos nuevos */
#funciones .feature:nth-child(7) .f-icon{
    background:#eef4ff !important;
}
#funciones .feature:nth-child(8) .f-icon{
    background:#eafff2 !important;
}

.manager-pill{
    background:#eef4ff !important;
    color:#1558ff !important;
}
.manager-icon{
    background:#eef4ff !important;
}
.carga-pill{
    background:#eafff2 !important;
    color:#078c5b !important;
}
.carga-icon{
    background:#eafff2 !important;
}

#detalle-muffu-manager,
#detalle-cargar-inventario{
    padding-top: 28px !important;
}

.manager-device img,
.carga-device img{
    object-fit: contain !important;
    object-position: center center !important;
    background:#fff !important;
}

/* Responsive */
@media(max-width: 1100px){
    #funciones .features{
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media(max-width: 640px){
    #funciones .features{
        grid-template-columns: 1fr !important;
    }
}

/* v1.4.0 Manager iPhone */
#detalle-muffu-manager .feature-detail-wrap{
 align-items:center!important;
}
#detalle-muffu-manager .manager-device{
 display:flex!important;
 justify-content:center!important;
 align-items:center!important;
}
#detalle-muffu-manager .manager-device img{
 max-height:720px!important;
 width:auto!important;
 max-width:360px!important;
 object-fit:contain!important;
 display:block!important;
 margin:auto!important;
 filter:drop-shadow(0 18px 35px rgba(0,0,0,.18));
}


/* ===== v1.4.1 Header fijo + botón Ver planes ===== */

/* Header siempre visible */
.header,
.navbar,
.site-header{
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    background: rgba(255,255,255,.96) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid #eef2f7 !important;
    box-shadow: 0 8px 24px rgba(15,23,42,.055) !important;
}

/* Contenedor de acciones */
.nav-actions,
.header-actions,
.header-cta,
.header-buttons{
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin-left: auto !important;
}

/* Botón secundario Ver planes */
.header-plan-btn{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 52px !important;
    padding: 0 28px !important;
    border-radius: 999px !important;
    background: #374151 !important;
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 850 !important;
    text-decoration: none !important;
    letter-spacing: -0.02em !important;
    box-shadow: none !important;
    border: 0 !important;
    white-space: nowrap !important;
}

.header-plan-btn:hover{
    background: #111827 !important;
    transform: translateY(-1px) !important;
}

/* Mantener Agendar demo como CTA principal */
.header-plan-btn + a,
.nav-actions a:not(.header-plan-btn),
.header-actions a:not(.header-plan-btn){
    white-space: nowrap !important;
}

/* Asegurar que el hero no quede tapado por el header sticky */
body{
    scroll-padding-top: 110px !important;
}

/* Responsive */
@media(max-width: 768px){
    .header,
    .navbar,
    .site-header{
        position: sticky !important;
        top: 0 !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .header-plan-btn{
        height: 44px !important;
        padding: 0 18px !important;
        font-size: 14px !important;
    }

    .nav-actions,
    .header-actions,
    .header-cta,
    .header-buttons{
        gap: 8px !important;
    }
}

@media(max-width: 520px){
    .header-plan-btn{
        display: none !important;
    }
}


/* ===== v1.4.2 Header fijo real ===== */
/* Fijo real: permanece visible aunque el contenedor padre tenga overflow/transform */
header,
.header,
.navbar,
.site-header,
.muffu-header,
.muffu-navbar,
.landing-header{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 2147483000 !important;
    background: rgba(255,255,255,.97) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid #eef2f7 !important;
    box-shadow: 0 8px 24px rgba(15,23,42,.055) !important;
}

/* Evitar que el hero quede debajo del header fijo */
body{
    padding-top: 96px !important;
    scroll-padding-top: 120px !important;
}

/* Si el header está dentro de un wrapper angosto, mantenerlo visualmente correcto */
header > *,
.header > *,
.navbar > *,
.site-header > *,
.muffu-header > *,
.muffu-navbar > *,
.landing-header > *{
    position: relative !important;
}

/* Botones del header */
.header-plan-btn{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 52px !important;
    padding: 0 28px !important;
    border-radius: 999px !important;
    background: #374151 !important;
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 850 !important;
    text-decoration: none !important;
    letter-spacing: -0.02em !important;
    border: 0 !important;
    box-shadow: none !important;
    white-space: nowrap !important;
}

.header-plan-btn:hover{
    background:#111827 !important;
}

@media(max-width:768px){
    body{
        padding-top: 82px !important;
    }
    .header-plan-btn{
        height:44px !important;
        padding:0 18px !important;
        font-size:14px !important;
    }
}

@media(max-width:520px){
    .header-plan-btn{
        display:none !important;
    }
}