*{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:#FFFFFF;color:#0C1A30;font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  ::selection{background:rgba(18,60,130,.18)}
  :root{
    --bg:#FFFFFF;--bg-2:#F4F7FC;--bg-3:#EEF3FA;
    --panel:rgba(15,35,82,.04);--panel-2:rgba(15,35,82,.07);
    --border:rgba(15,35,82,.12);--border-2:rgba(15,35,82,.20);
    --text:#0C1A30;--muted:#4A5C78;--dim:#8494AC;
    --accent:#123C82;--red:#C60B1E;
    --accent-2:color-mix(in srgb,var(--accent),white 12%);
    --accent-3:#123C82;
    --accent-soft:color-mix(in srgb,var(--accent),transparent 90%);
    --glow:color-mix(in srgb,var(--accent),transparent 80%);
  }
  ::-webkit-scrollbar{height:10px;width:10px}
  ::-webkit-scrollbar-thumb{background:rgba(15,35,82,.18);border-radius:20px}
  @keyframes auroraA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6%,-4%) scale(1.12)}}
  @keyframes auroraB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-7%,5%) scale(1.15)}}
  @keyframes marquee{to{transform:translateX(-50%)}}
  @keyframes marqueeRev{from{transform:translateX(-50%)}to{transform:translateX(0)}}
  a{color:inherit}
  [data-navlinks] a{transition:color .2s}
  [data-navlinks] a:hover{color:var(--accent)}
  @media (max-width:920px){[data-navlinks]{display:none!important}[data-navcta-sec]{display:none!important}}
  [data-navmobile]{display:none}
  @media (max-width:920px){[data-navmobile]{display:inline-flex!important}}
  @media (max-width:400px){[data-navmobile]{font-size:12.5px!important}}
  /* Móvil: encoger la barra superior para que quepan logo + Entrevistas + Descargar */
  @media (max-width:600px){
    #nav > div{padding:11px 14px!important;gap:8px!important}
    #nav a[href="#top"]{gap:8px!important}
    #nav a[href="#top"] img{width:30px!important;height:30px!important}
    #nav a[href="#top"] span{font-size:15px!important;white-space:nowrap}
    [data-navmobile]{font-size:12px!important;gap:5px!important}
    #nav a[href*="apps.apple.com"]{padding:9px 13px!important;font-size:12.5px!important}
  }
  @media (max-width:360px){
    #nav a[href="#top"] span{font-size:13.5px!important}
    [data-navmobile]{font-size:11px!important}
    #nav a[href*="apps.apple.com"]{padding:8px 11px!important;font-size:12px!important}
  }
  @media (max-width:720px){[data-heropad]{padding-left:20px!important;padding-right:20px!important}}
  /* HERO TWO-COLUMN (texto izquierda · iPhone derecha, como PIRTest) */
  .hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:44px;align-items:center;width:100%;text-align:left}
  .hero-copy{display:flex;flex-direction:column;align-items:flex-start}
  .hero-copy h1{font-size:clamp(2.2rem,3.4vw,3.6rem)}
  .hero-copy .row{justify-content:flex-start}
  .hero-visual{display:flex;justify-content:center;align-items:center}
  @media(max-width:900px){
    .hero-grid{grid-template-columns:1fr;gap:8px;text-align:center;justify-items:center}
    .hero-copy{align-items:center}
    .hero-copy h1{font-size:clamp(1.9rem,6.2vw,5rem)}
    .hero-copy .row{justify-content:center}
  }
  /* HERO PHONE MOCKUP */
  .hero-phone{position:relative;margin:0 auto;width:288px;height:586px;perspective:1300px}
  .hero-phone .pglow{position:absolute;inset:-46px;border-radius:50%;background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--accent),transparent 42%),transparent 62%);filter:blur(34px);z-index:0}
  .hero-phone .frame{position:relative;z-index:1;width:100%;height:100%;border-radius:50px;background:linear-gradient(155deg,#22386080,#0a1526);padding:13px;box-shadow:0 54px 96px -36px rgba(0,0,0,.8),inset 0 0 0 2px rgba(255,255,255,.07),inset 0 0 0 8px rgba(0,0,0,.35);transform-style:preserve-3d;animation:phoneFloat 10s ease-in-out infinite}
  .hero-phone .screen{position:relative;width:100%;height:100%;border-radius:38px;overflow:hidden;background:#000}
  .hero-phone .di{position:absolute;top:15px;left:50%;transform:translateX(-50%);width:74px;height:22px;background:#05070f;border-radius:11px;z-index:4;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;box-shadow:inset 0 0 3px rgba(255,255,255,.06)}
  .hero-phone .di::after{content:"";width:7px;height:7px;border-radius:50%;background:#0b1a30;box-shadow:inset 0 0 2px #24406b}
  .hero-phone .pslide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease}
  .hero-phone .pslide.on{opacity:1}
  .hero-phone .pslide img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
  @keyframes phoneFloat{0%,100%{transform:rotateY(-8deg) rotateX(3deg) translateY(0)}50%{transform:rotateY(8deg) rotateX(-2deg) translateY(-12px)}}
  @media (prefers-reduced-motion:reduce){.hero-phone .frame{animation:none;transform:rotateY(-5deg)}.hero-phone .pslide{transition:none}}
  @media (max-width:520px){.hero-phone{width:236px;height:480px;margin-top:34px}.hero-phone .di{width:60px;height:19px;top:12px;padding-right:6px}.hero-phone .di::after{width:6px;height:6px}}
  /* Chips flotantes alrededor del iPhone (estilo PIRTest, adaptado al tema oscuro) */
  .hero-phone .chip{position:absolute;z-index:5;display:flex;align-items:center;gap:9px;padding:10px 13px;border-radius:14px;background:rgba(255,255,255,.92);border:1px solid var(--border);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 14px 34px -16px rgba(15,35,82,.28),inset 0 0 0 1px rgba(255,255,255,.6);font-family:'Plus Jakarta Sans';font-weight:700;font-size:13px;color:var(--text);white-space:nowrap;animation:chipFloat 6s ease-in-out infinite}
  .hero-phone .chip .e{font-size:18px;line-height:1}
  .hero-phone .chip .sub{display:block;font-size:10.5px;color:var(--muted);font-weight:600;margin-top:1px}
  .hero-phone .chip.c1{top:54px;left:-26px;animation-delay:0s}
  .hero-phone .chip.c2{bottom:158px;right:-30px;animation-delay:1.4s}
  .hero-phone .chip.c3{bottom:46px;left:-14px;animation-delay:2.8s}
  @keyframes chipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
  @media (prefers-reduced-motion:reduce){.hero-phone .chip{animation:none}}
  @media (max-width:900px){.hero-phone .chip.c1{left:-10px}.hero-phone .chip.c2{right:-12px}}
  @media (max-width:520px){.hero-phone .chip.c1{top:30px;left:-6px}.hero-phone .chip.c2{bottom:120px;right:-8px}.hero-phone .chip.c3{bottom:30px;left:-2px}}
  @media (max-width:420px){.hero-phone .chip{display:none}}
  /* Pricing: two equal banners side by side; stack only on mobile */
  .plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
  @media (max-width:900px){.plan-grid{grid-template-columns:1fr}}

/* ============ NAV CON DESPLEGABLES ============ */
.ddw{position:relative;display:inline-block}
.ddbtn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:14.5px;font-weight:500;color:var(--muted);padding:6px 2px}
.ddbtn:hover,.ddw:hover .ddbtn,.ddbtn[aria-expanded="true"]{color:var(--accent)}
.ddbtn .car{width:9px;height:9px;transition:transform .18s ease}
.ddbtn[aria-expanded="true"] .car,.ddw:hover .ddbtn .car{transform:rotate(180deg)}
.ddmenu{position:absolute;top:calc(100% + 12px);left:-12px;min-width:252px;background:#fff;
  border:1px solid var(--border);border-radius:14px;box-shadow:0 20px 50px -22px rgba(15,35,82,.45);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s,transform .16s,visibility .16s;z-index:70}
.ddw:hover .ddmenu,.ddw:focus-within .ddmenu,.ddmenu.open{opacity:1;visibility:visible;transform:translateY(0)}
.ddmenu a{display:block;padding:10px 12px;border-radius:9px;font-size:14px;font-weight:600;color:var(--text);text-decoration:none}
.ddmenu a:hover{background:var(--bg-2);color:var(--accent)}
.burger{display:none;background:none;border:1px solid var(--border);border-radius:11px;padding:9px 11px;cursor:pointer;color:var(--text)}
.drawer{display:none;background:#fff;border-top:1px solid var(--border);padding:8px 32px 18px;max-height:calc(100vh - 72px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.drawer.open{display:block}
.drawer details{border-bottom:1px solid var(--border)}
.drawer summary{list-style:none;cursor:pointer;padding:13px 0;font-weight:700;color:var(--text);font-size:15px}
.drawer summary::-webkit-details-marker{display:none}
.drawer summary::after{content:"▾";float:right;color:var(--muted)}
.drawer details[open] summary::after{content:"▴"}
.drawer .dlinks a{display:block;padding:9px 0 9px 12px;color:var(--muted);font-size:14.5px;font-weight:600;text-decoration:none}
.drawer a.dtop{display:block;padding:13px 0;font-weight:700;color:var(--text);border-bottom:1px solid var(--border);text-decoration:none;font-size:15px}
@media(max-width:1040px){[data-navlinks]{display:none !important}.burger{display:inline-flex}}

/* ============ PÁGINAS DE CONTENIDO ============ */
.page{max-width:820px;margin:0 auto;padding:118px 32px 84px}
.crumbs{font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-bottom:18px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.crumbs [aria-current]{color:var(--text);font-weight:700}
.page h1{font-family:'Plus Jakarta Sans';font-weight:800;font-size:clamp(29px,4.2vw,43px);line-height:1.08;letter-spacing:-.03em;margin:0 0 14px;color:var(--text)}
.page .entradilla{font-size:17.5px;line-height:1.65;color:var(--muted);margin:0 0 28px}
.page h2{font-family:'Plus Jakarta Sans';font-weight:700;font-size:clamp(21px,2.6vw,27px);line-height:1.22;margin:44px 0 14px;color:var(--text);letter-spacing:-.02em}
.page h3{font-size:17.5px;font-weight:700;margin:26px 0 9px;color:var(--text)}
.page p{font-size:16px;line-height:1.72;color:var(--muted);margin:0 0 15px}
.page ul,.page ol{font-size:16px;line-height:1.72;color:var(--muted);padding-left:22px;margin:0 0 15px}
.page li{margin-bottom:7px}
.page a{color:var(--accent)}
.page strong{color:var(--text);font-weight:600}
.updated{font-size:13px;color:var(--dim);margin:0 0 26px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.tbl{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:15px}
.tbl th,.tbl td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--border);vertical-align:top}
.tbl th{background:var(--bg-2);font-weight:700;color:var(--text);font-size:14px}
.tbl td{color:var(--muted)}
.aviso{border-left:4px solid #E6B42C;background:#fdf9ee;padding:15px 18px;border-radius:0 12px 12px 0;margin:0 0 24px;font-size:15px;line-height:1.65;color:#4a4131}
.aviso b{color:var(--text)}
.estado{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;border-radius:6px;margin-right:8px;vertical-align:middle}
.e-conf{background:#e4f2e9;color:#12653a}
.e-prev{background:#fdf1d4;color:#8a6200}
.e-esti{background:#eaeef5;color:#4A5C78}
.bloque{border:1px solid var(--border);border-radius:14px;padding:20px;margin-bottom:14px;background:#fff}
.bloque b{display:block;color:var(--text);font-size:16px;margin-bottom:4px}
.bloque .rango{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--accent);font-weight:600;letter-spacing:.04em}
.cta-box{background:var(--bg-2);border:1px solid var(--border);border-radius:16px;padding:26px;margin:36px 0 0;text-align:center}
.cta-box p{margin:0 0 16px;color:var(--muted)}
.cta-box a{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:14px;background:#0C1A30;color:#fff;text-decoration:none;font-weight:700}
.rel{display:grid;gap:12px;margin:14px 0 0}
.rel a{display:block;padding:15px 17px;border:1px solid var(--border);border-radius:13px;text-decoration:none;background:#fff}
.rel a:hover{border-color:var(--accent)}
.rel b{display:block;color:var(--text);font-size:15.5px;margin-bottom:3px}
.rel span{font-size:14px;color:var(--muted)}
.postlist{display:grid;gap:16px;margin-top:26px}
.postlist article{border:1px solid var(--border);border-radius:15px;padding:22px;background:#fff}
.postlist h2{margin:0 0 8px;font-size:20px}
.postlist h2 a{color:var(--text);text-decoration:none}
.postlist time{font-size:13px;color:var(--dim)}
.postlist p{font-size:15px;margin:8px 0 0}