/* ═══════════ MONK PDP — secciones nuevas: Por qué Monk + Datos reales ═══════════ */
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@1,6..96,400;1,6..96,500;1,6..96,600&display=swap');
@font-face{font-family:'Creato Display';src:url('fonts/creato-display-regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Creato Display';src:url('fonts/creato-display-medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Creato Display';src:url('fonts/creato-display-bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Creato Display';src:url('fonts/creato-display-extrabold.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Creato Display';src:url('fonts/creato-display-black.woff2') format('woff2');font-weight:900;font-display:swap}

.mk-sx{
  font-family:'Creato Display',-apple-system,sans-serif;
  color:#263245;
  background:#F0F0F0;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
.mk-sx :where(*){margin:0;padding:0;box-sizing:border-box}
.mk-sx :where(img){max-width:100%;display:block}
.mk-sx .sx-grain{
  position:absolute;inset:0;pointer-events:none;z-index:3;opacity:.09;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─── Reveal (JS añade .sx-reveal; sin JS todo se ve) ─── */
.mk-sx .sx-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.mk-sx .sx-reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .mk-sx .sx-reveal{opacity:1;transform:none;transition:none}
}

/* ═══════════ SECCIÓN 1 — ¿Por qué Monk y no otras apps? ═══════════ */
.mk-sx .sx1{position:relative;padding:clamp(56px,8vw,110px) clamp(16px,4vw,48px)}
.mk-sx .sx1-head{max-width:960px;margin:0 auto;text-align:center}
.mk-sx .sx1-title{
  font-size:clamp(30px,4.2vw,54px);font-weight:900;letter-spacing:-.02em;line-height:1.1;
}
.mk-sx .sx1-title .sx1-hl{
  background:linear-gradient(100deg,#7FA7C1 0%,#5C7E97 45%,#263245 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.mk-sx .sx1-sub{
  margin-top:16px;font-size:clamp(16px,2vw,19px);line-height:1.55;color:#3d4c61;font-weight:500;
}

.mk-sx .sx1-card{
  position:relative;max-width:1080px;margin:clamp(34px,5vw,54px) auto 0;
  border-radius:32px;overflow:hidden;
  background:
    radial-gradient(90% 80% at 12% 18%,rgba(169,196,213,.85) 0%,rgba(169,196,213,0) 55%),
    radial-gradient(80% 90% at 88% 82%,rgba(127,167,193,.55) 0%,rgba(127,167,193,0) 60%),
    linear-gradient(160deg,#DCE6EE 0%,#EDF1F5 48%,#CBD9E4 100%);
  box-shadow:0 24px 60px rgba(38,50,69,.16);
  padding:clamp(24px,4vw,52px);
}
.mk-sx .sx1-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3.5vw,48px);align-items:stretch;
}

/* Columna Monk (tarjeta blanca) */
.mk-sx .sx1-monk{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.9);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-radius:24px;padding:clamp(22px,3vw,36px);
  box-shadow:0 14px 40px rgba(38,50,69,.10);
  display:flex;flex-direction:column;
}
.mk-sx .sx1-monk-img{
  width:min(200px,52%);margin:4px auto 18px;
}
.mk-sx .sx1-monk-img img{width:100%;filter:drop-shadow(0 16px 28px rgba(38,50,69,.22))}

/* Columna Screen Time */
.mk-sx .sx1-app{
  display:flex;flex-direction:column;padding:clamp(10px,1.5vw,16px) clamp(4px,1vw,10px);
}
.mk-sx .sx1-app-label{
  text-align:center;font-size:15px;font-weight:800;letter-spacing:.01em;margin-bottom:14px;color:#263245;
}
.mk-sx .sx1-monk-label{display:none}

/* Captura Tiempo de uso recreada (datos reales de la captura de Mauro) */
.mk-sx .sx-shot{
  width:min(240px,78%);margin:0 auto 20px;
  font-family:-apple-system,'SF Pro Text','Helvetica Neue',sans-serif;
  background:#f2f2f7;border-radius:16px;padding:11px 12px 12px;
  box-shadow:0 16px 36px rgba(38,50,69,.22);
  color:#1c1c1e;
}
.mk-sx .sxp-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.mk-sx .sxp-head b{font-size:11px;font-weight:700;color:#8e8e93}
.mk-sx .sxp-head span{font-size:9.5px;font-weight:600;color:#0a84ff}
.mk-sx .sxp-card{background:#fff;border-radius:12px;padding:10px 11px 9px}
.mk-sx .sxp-date{font-size:8.5px;color:#8e8e93;font-weight:500}
.mk-sx .sxp-big{font-size:19px;font-weight:700;letter-spacing:-.02em;margin-top:1px;color:#000}
.mk-sx .sxp-chart{position:relative;height:58px;margin-top:9px;border-bottom:1px solid #e5e5ea}
.mk-sx .sxp-chart::before,.mk-sx .sxp-chart::after{
  content:"";position:absolute;left:0;right:0;height:1px;background:#f0f0f2;
}
.mk-sx .sxp-chart::before{top:25%}
.mk-sx .sxp-chart::after{top:50%}
.mk-sx .sxp-media{
  position:absolute;left:0;right:0;top:34%;height:0;
  border-top:1.5px dashed #a9a9ae;z-index:2;
}
.mk-sx .sxp-bars{position:absolute;inset:0;display:flex;align-items:flex-end;gap:9%;padding:0 2%}
.mk-sx .sxp-bar{flex:1;height:100%;display:flex;flex-direction:column-reverse;border-radius:2.5px 2.5px 0 0;overflow:hidden}
.mk-sx .sxp-bar i{display:block;background:#d1d1d6}
.mk-sx .sxp-bar i:last-child{border-radius:2.5px 2.5px 0 0}
.mk-sx .sxp-bar .b-blue{background:#0a84ff}
.mk-sx .sxp-bar .b-teal{background:#66c9c4}
.mk-sx .sxp-bar .b-orange{background:#ff9f0a}
.mk-sx .sxp-days{display:flex;gap:9%;padding:0 2%;margin-top:3px}
.mk-sx .sxp-days span{flex:1;text-align:center;font-size:7px;color:#aeaeb2;font-weight:600}
.mk-sx .sxp-days .on{color:#1c1c1e}
.mk-sx .sxp-leg{display:grid;grid-template-columns:1fr 1fr;gap:5px 8px;margin-top:9px}
.mk-sx .sxp-leg p{margin:0;font-size:7.5px;line-height:1.3}
.mk-sx .sxp-leg p b{display:block;font-size:8.5px;font-weight:700;color:#000}
.mk-sx .sxp-leg .l-blue{color:#0a84ff;font-weight:600}
.mk-sx .sxp-leg .l-teal{color:#3fb2ac;font-weight:600}
.mk-sx .sxp-leg .l-orange{color:#ff9f0a;font-weight:600}

/* Listas check / cruz */
.mk-sx .sx1-list{list-style:none;display:flex;flex-direction:column;gap:14px}
.mk-sx .sx1-list li{
  display:flex;align-items:flex-start;gap:12px;
  font-size:clamp(15.5px,1.6vw,17.5px);font-weight:700;line-height:1.35;color:#263245;
}
.mk-sx .sx1-ic{
  flex:none;width:30px;height:30px;border-radius:50%;margin-top:-2px;
  display:inline-flex;align-items:center;justify-content:center;
}
.mk-sx .sx1-ic svg{width:14px;height:14px}
.mk-sx .sx1-ic-check{
  background:linear-gradient(135deg,#7FA7C1 0%,#CBD9E4 100%);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.6),0 4px 10px rgba(92,126,151,.25);
}
.mk-sx .sx1-ic-check svg{stroke:#fff}
.mk-sx .sx1-ic-cross{background:transparent}
.mk-sx .sx1-ic-cross svg{stroke:#263245;width:16px;height:16px}
.mk-sx .sx1-app .sx1-list li{font-weight:600;color:#33425a}

.mk-sx .sx1-quote{
  margin-top:clamp(26px,4vw,40px);text-align:center;
  font-family:'Bodoni Moda',serif;font-style:italic;font-weight:500;
  font-size:clamp(17px,2.2vw,22px);color:#3d4c61;
}

/* ═══════════ SECCIÓN 2 — Datos reales de usuarios reales ═══════════ */
.mk-sx .sx2{position:relative;padding:clamp(48px,6vw,88px) clamp(16px,4vw,48px)}
.mk-sx .sx2-card{
  position:relative;max-width:1080px;margin:0 auto;border-radius:36px;overflow:hidden;
  background:linear-gradient(180deg,#1B2636 0%,#263245 38%,#3F5A75 72%,#6E93AF 100%);
  box-shadow:0 28px 70px rgba(22,31,42,.35);
  padding:clamp(44px,6vw,84px) clamp(24px,5vw,72px);
  text-align:center;color:#fff;
}
.mk-sx .sx2-card .sx-grain{opacity:.12}
.mk-sx .sx2-title{
  font-size:clamp(30px,4.4vw,52px);font-weight:900;letter-spacing:-.02em;line-height:1.08;color:#F0F0F0;
}
.mk-sx .sx2-sub{
  margin-top:14px;font-size:clamp(15px,1.8vw,18px);color:#C2D0DD;font-weight:500;
}
.mk-sx .sx2-grid{
  margin-top:clamp(36px,5vw,58px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,40px);align-items:start;
}
.mk-sx .sx2-num{
  font-size:clamp(56px,7vw,96px);font-weight:900;letter-spacing:-.03em;line-height:1;color:#F0F0F0;
  display:flex;align-items:baseline;justify-content:center;
  font-variant-numeric:tabular-nums;
}
.mk-sx .sx2-unit{
  font-size:.52em;font-weight:800;color:#9FB9CD;margin-left:.06em;
}
.mk-sx .sx2-cap{
  margin:14px auto 0;font-size:clamp(14.5px,1.6vw,17px);line-height:1.45;color:#C2D0DD;max-width:24ch;font-weight:500;
}
.mk-sx .sx2-stat:nth-child(2) .sx-reveal{transition-delay:.12s}
.mk-sx .sx2-stat:nth-child(3) .sx-reveal{transition-delay:.24s}

/* ═══════════ SECCIÓN 3 — ¿Y si pierdo el hábito? (garantía) ═══════════ */
.mk-sx em{font-family:'Bodoni Moda',serif;font-style:italic;font-weight:500}
.mk-sx .sx3{position:relative;padding:0}
.mk-sx .sx3-card{
  position:relative;overflow:hidden;
  background:
    radial-gradient(80% 95% at 85% 12%,rgba(169,196,213,.8) 0%,rgba(169,196,213,0) 58%),
    radial-gradient(70% 80% at 12% 88%,rgba(127,167,193,.45) 0%,rgba(127,167,193,0) 55%),
    linear-gradient(160deg,#E3EBF1 0%,#EDF1F5 46%,#CBD9E4 100%);
  padding:clamp(52px,7vw,96px) clamp(22px,4vw,64px);
  text-align:center;
}
.mk-sx .sx3-title{
  font-size:clamp(30px,4.4vw,52px);font-weight:900;letter-spacing:-.02em;line-height:1.08;color:#263245;
}
.mk-sx .sx3-title em{color:#5C7E97;font-weight:500}
.mk-sx .sx3-lead{margin-top:14px;font-size:clamp(17px,2vw,21px);font-weight:800;color:#263245}
.mk-sx .sx3-txt{
  margin:12px auto 0;max-width:54ch;font-size:clamp(15px,1.8vw,17.5px);line-height:1.6;color:#3d4c61;font-weight:500;
}
.mk-sx .sx3-txt strong{font-weight:800;color:#263245}
.mk-sx .sx3-pill{
  margin-top:clamp(22px,3vw,30px);display:inline-flex;align-items:center;gap:10px;
  padding:13px 26px;border-radius:999px;color:#fff;font-weight:800;font-size:clamp(14px,1.6vw,16px);
  background:linear-gradient(135deg,#263245 0%,#3d5068 55%,#5C7E97 100%);
  box-shadow:0 10px 26px rgba(38,50,69,.28);
}
.mk-sx .sx3-pill svg{width:19px;height:19px;flex:none}

/* ═══════════ Responsive ═══════════ */
@media (max-width:880px){
  .mk-sx .sx1-grid{grid-template-columns:1fr;gap:26px}
  .mk-sx .sx1-app{padding-top:6px}
  .mk-sx .sx2-grid{gap:30px}
}
@media (max-width:600px){
  .mk-sx .sx1{padding-top:48px;padding-left:12px;padding-right:12px}
  .mk-sx .sx1-card{border-radius:24px;padding:16px 12px 20px}
  /* Monk y Screen Time lado a lado, compactos */
  .mk-sx .sx1-grid{grid-template-columns:1fr 1fr;gap:10px}
  .mk-sx .sx1-monk{padding:14px 11px;border-radius:16px}
  .mk-sx .sx1-monk-label{
    display:block;text-align:center;font-size:13px;font-weight:800;color:#263245;margin-bottom:10px;
  }
  .mk-sx .sx1-app{padding:14px 2px 0}
  .mk-sx .sx1-app-label{font-size:13px;margin-bottom:10px}
  .mk-sx .sx1-lbl-extra{display:none}
  .mk-sx .sx1-monk-img{width:64px;margin:0 auto 12px}
  .mk-sx .sx-shot{width:100%;max-width:150px;margin-bottom:14px;padding:8px 8px 9px;border-radius:12px}
  .mk-sx .sxp-big{font-size:14px}
  .mk-sx .sxp-chart{height:40px}
  .mk-sx .sx1-list{gap:10px}
  .mk-sx .sx1-list li{font-size:12.5px;font-weight:700;gap:7px;line-height:1.3}
  .mk-sx .sx1-app .sx1-list li{font-size:12.5px}
  .mk-sx .sx1-ic{width:20px;height:20px;margin-top:-1px}
  .mk-sx .sx1-ic svg{width:9px;height:9px}
  .mk-sx .sx1-ic-cross svg{width:11px;height:11px}
  .mk-sx .sx1-quote{font-size:15px;padding:0 6px}
  .mk-sx .sx2-grid{grid-template-columns:1fr;gap:34px}
  .mk-sx .sx2-cap{margin-top:10px}
  .mk-sx .sx2-card{border-radius:26px}
  .mk-sx .sx3-card{padding:44px 20px 48px}
  .mk-sx .sx3-txt{font-size:14.5px}
  .mk-sx .sx3-pill{padding:12px 22px;font-size:13.5px}
}