/* RISET · estilos compartidos (index, soporte, privacidad) */
:root{
  --ink:#141414;
  --ink-soft:#5f5f5f;
  --paper:#ffffff;
  --mist:#f5f5f3;
  --line:#e6e6e2;
  --azul:#1665d8;   /* preguntas */
  --azul-bg:#eef3fc;
  --naranja:#ff5b14;/* pulsos */
  --naranja-bg:#fff2ea;
  --verde:#1f9d3a;  /* ciclos */
  --verde-bg:#eef8ef;
  --oro:#f2b705;    /* legendaria */
  --oro-bg:#fff8e1;
  --radius-lg:28px;
  --radius-md:18px;
  --maxw:1120px;
  --display:"Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--azul);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
/* Los PNG de iconos tienen fondo blanco: multiply los funde con fondos tintados */
.ink-img{mix-blend-mode:multiply}

/* ---------- Barra superior ---------- */
.nav{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid transparent}
.nav.scrolled{border-bottom-color:var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:70px}.nav-logo{display:block}
.nav-logo img{height:60px;width:auto;max-width:none;object-fit:contain;object-position:left center}
.nav-links{display:flex;gap:28px;align-items:center;font-size:15px}
.nav-links a{text-decoration:none;color:var(--ink-soft)}
.nav-links a:hover{color:var(--ink)}
.nav-links .nav-cta{color:var(--paper);background:var(--ink);padding:9px 18px;border-radius:999px}
.nav-links .nav-cta:hover{color:var(--paper);opacity:.85}
@media (max-width:640px){.nav-links .hide-sm{display:none}}

/* ---------- Botones ---------- */
.btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn-store{display:inline-flex;align-items:center;gap:10px;background:#000;color:#fff;text-decoration:none;padding:10px 22px 10px 18px;border-radius:14px;line-height:1.1}
.btn-store svg{width:24px;height:24px;fill:#fff}
.btn-store small{display:block;font-size:11px;opacity:.85}
.btn-store strong{display:block;font-size:18px;font-weight:600;letter-spacing:-.01em}
.btn-store:hover{opacity:.85}
.btn-ghost{display:inline-flex;align-items:center;padding:0 24px;min-height:56px;border-radius:14px;border:1.5px solid var(--ink);text-decoration:none;font-weight:600}
.btn-ghost:hover{background:var(--mist)}
.free-note{margin:14px 0 0;font-size:14px;color:var(--ink-soft)}

/* ---------- Hero ---------- */
.hero{text-align:center;padding:72px 0 0;overflow-x:clip}
.hero h1{font-family:var(--display);font-weight:700;font-size:clamp(40px,6.4vw,76px);line-height:1.02;letter-spacing:-.035em;margin:0 auto;max-width:13ch}
.hero .lead{font-size:clamp(17px,2vw,20px);color:var(--ink-soft);max-width:34em;margin:22px auto 32px}
.hero-shot{position:relative;margin:56px auto 0;max-width:620px}
.hero-shot::before{content:"";position:absolute;inset:18% -12% 0;background:radial-gradient(closest-side,var(--mist),transparent);z-index:-1}
.hero-shot img{width:100%;height:auto}

/* ---------- Cómo funciona ---------- */
.how{padding:120px 0 40px;scroll-margin-top:68px}
.sec-title{font-family:var(--display);font-weight:700;font-size:clamp(32px,4.4vw,52px);letter-spacing:-.03em;line-height:1.05;text-align:center;margin:0}
.sec-lead{text-align:center;color:var(--ink-soft);max-width:30em;margin:16px auto 0}

.schema{margin:64px auto 0;max-width:900px}
.node{border-radius:var(--radius-lg);padding:32px}

.node h3{font-family:var(--display);font-size:28px;letter-spacing:-.02em;margin:12px 0 8px;line-height:1.1}
.node p{margin:0;color:#333}
.node-ciclo{background:var(--verde-bg);max-width:520px;margin:0 auto;text-align:center}
.node-ciclo .ico{margin:0 auto}
.node-ciclo h3{color:var(--verde)}
.node-pregunta{background:var(--azul-bg)}
.node-pregunta h3{color:var(--azul)}
.node-pulsos{background:var(--naranja-bg)}
.node-pulsos h3{color:var(--naranja)}
.node .when{display:inline-block;margin-top:16px;font-size:14px;font-weight:600;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.75)}
.branches{display:block;width:100%;height:110px;color:var(--ink)}
.branches path{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.branch-down{display:none}
.kids{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:760px){
  .branches{display:none}
  .branch-down{display:block;width:40px;height:56px;margin:8px auto}
  .branch-down path{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round}
  .kids{grid-template-columns:1fr;gap:16px}
}

/* ---------- Cierre ---------- */
.closing{text-align:center;padding:120px 0}
.closing h2{font-family:var(--display);font-weight:700;font-size:clamp(30px,4vw,46px);letter-spacing:-.03em;line-height:1.08;margin:0 auto 32px;max-width:16ch}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--line);padding:32px 0 48px;font-size:15px;color:var(--ink-soft)}
.footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.footer nav{display:flex;gap:24px;flex-wrap:wrap}
.footer a{text-decoration:none}
.footer a:hover{color:var(--ink);text-decoration:underline}
.ig{display:inline-flex;align-items:center;gap:8px}
.ig svg{width:18px;height:18px}

/* ---------- Páginas de texto (soporte / privacidad) ---------- */
.doc{max-width:720px;margin:0 auto;padding:64px 24px 96px}
.doc h1{font-family:var(--display);font-size:clamp(36px,5vw,52px);letter-spacing:-.03em;line-height:1.05;margin:0 0 12px}
.doc .meta{color:var(--ink-soft);font-size:15px;margin:0 0 28px}
.doc h2{font-family:var(--display);font-size:26px;letter-spacing:-.02em;line-height:1.2;margin:56px 0 12px;scroll-margin-top:88px}
.doc h3{font-size:18px;margin:28px 0 8px}
.doc p,.doc li{color:#2b2b2b}
.doc ul{padding-left:1.2em}
.doc li{margin:6px 0}
.doc a{color:var(--azul)}
.toc{background:var(--mist);border-radius:var(--radius-md);padding:24px 28px;margin:32px 0}
.toc strong{display:block;margin-bottom:8px}
.toc ol{margin:0;padding-left:1.3em}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}
.contact-card{background:var(--azul-bg);border-radius:var(--radius-lg);padding:32px;margin:32px 0 16px}
.contact-card h2{margin-top:0}
.contact-card .mail{display:inline-block;font-family:var(--display);font-size:clamp(20px,3vw,26px);font-weight:600;color:var(--azul);text-decoration:none;word-break:break-all;margin:4px 0 12px}
.contact-card p{margin:0}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;list-style:none;font-weight:600;font-size:18px;padding:16px 32px 16px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:12px;font-size:24px;font-weight:400;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 18px}

@media (max-width:640px){.hero-shot{margin-left:-12px;margin-right:-12px}}

/* ---------- Ajustes v2 ---------- */
/* Iconos: se muestran enteros (contain). Funcionan mejor con PNG recortados al borde del dibujo */
.ico{width:64px;height:64px;flex-shrink:0}
.ico img{width:100%;height:100%;object-fit:contain}
.node .ico{width:64px;height:64px}

/* Hero en dos columnas en escritorio: el móvil cabe en la primera pantalla */
@media (min-width:960px){
  .hero{padding:24px 0 0}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;min-height:calc(100svh - 68px)}
  .hero-text{text-align:left}
  .hero h1{margin:0;font-size:clamp(44px,4.6vw,68px);max-width:12ch}
  .hero .lead{margin:22px 0 32px}
  .hero .btns{justify-content:flex-start}
  .hero-shot{margin:0;max-width:none;display:flex;justify-content:center}
  .hero-shot img{width:auto;max-width:100%;max-height:calc(100svh - 110px)}
}

/* Tres extras: mismo tamaño, estilo secundario */
.extras{margin:72px auto 0;max-width:900px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.extra{border:1.5px solid var(--line);border-radius:var(--radius-md);padding:24px;background:var(--paper)}
.extra .ico{width:44px;height:44px;margin-bottom:12px}
.extra h3{font-family:var(--display);font-size:19px;letter-spacing:-.01em;line-height:1.2;margin:0 0 6px}
.extra p{margin:0;font-size:15px;color:var(--ink-soft)}
@media (max-width:760px){.extras{grid-template-columns:1fr;margin-top:56px}}

/* ---------- Kicker del H1 (keyword visible) ---------- */
.h1-kicker{display:block;font-family:var(--body);font-size:clamp(14px,1.6vw,16px);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 14px;line-height:1.3}

/* ---------- Blog: franja en la home ---------- */
.reads{padding:96px 0 0}
.reads-strip{max-width:900px;margin:0 auto;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:28px 0;display:flex;gap:12px 32px;align-items:baseline;flex-wrap:wrap}
.reads-strip h2{font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin:0}
.reads-strip ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 28px;flex:1}
.reads-strip a{font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--line)}
.reads-strip a:hover{border-color:var(--ink)}

/* ---------- Blog: tarjetas tipo libreta (índice y "sigue leyendo") ---------- */
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:40px auto 0}
.post-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:44px 26px 28px 46px;border-radius:6px 16px 16px 6px;text-decoration:none;color:var(--ink);
  background:#fcfbf8;
  border:1px solid var(--line);box-shadow:0 1px 0 #e9e9e5,0 10px 24px -18px rgba(0,0,0,.35);transition:transform .2s,box-shadow .2s}
.post-card::before{content:"";position:absolute;top:0;bottom:0;left:30px;border-left:1.5px solid #d9d9d4}
.post-card::after{content:"";position:absolute;top:14px;left:12px;right:12px;height:10px;
  background:radial-gradient(circle,#d4d4cf 3px,transparent 3.5px) 0 0/22px 10px repeat-x}
.post-card:hover{transform:translateY(-3px);box-shadow:0 1px 0 #e9e9e5,0 16px 30px -18px rgba(0,0,0,.4)}
.post-card h2,.post-card h3{font-family:var(--display);font-size:22px;letter-spacing:-.02em;line-height:1.2;margin:0}
.doc .post-card h2{margin:0}
.post-card p{margin:0;color:#444;font-size:16px}
.post-card .read{margin-top:auto;padding-top:6px;font-size:14px;font-weight:600;color:var(--ink)}
@media (max-width:860px){.post-grid{grid-template-columns:1fr}}

/* ---------- Artículos ---------- */
.article .crumbs{font-size:14px;color:var(--ink-soft);margin:0 0 20px}
.article .crumbs a{color:var(--ink-soft)}
.article .lead{font-size:clamp(18px,2vw,20px);color:var(--ink-soft);margin:0 0 8px}
.article blockquote{margin:28px 0;padding:4px 0 4px 20px;border-left:4px solid var(--azul);font-size:19px;color:var(--ink)}
.article .key{background:var(--azul-bg);border-radius:var(--radius-md);padding:20px 24px;margin:28px 0}
.article .key p{margin:0}
.article ol li,.article ul li{margin:8px 0}
.article table{width:100%;border-collapse:collapse;margin:24px 0;font-size:15px}
.article th,.article td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.article th{background:var(--mist);font-weight:600}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-scroll table{min-width:620px}
.cta-box{margin:48px 0;padding:32px;border-radius:var(--radius-lg);background:var(--mist);text-align:center}
.cta-box h2{margin:0 0 8px!important}
.cta-box p{margin:0 auto 20px;max-width:30em}
.cta-box .btn-store{display:inline-flex}
.pulse-list{list-style:none;padding:0!important}
.pulse-list li{background:var(--naranja-bg);border-radius:14px;padding:14px 18px;margin:10px 0}
.pulse-list li strong{color:var(--naranja)}
.sources{font-size:15px}
.sources li{color:var(--ink-soft)!important}
.related{margin-top:56px;padding-top:32px;border-top:1px solid var(--line)}
.related .post-grid{grid-template-columns:1fr 1fr;margin-top:20px}
@media (max-width:640px){.related .post-grid{grid-template-columns:1fr}}
.doc a.post-card{color:var(--ink)}

/* ---------- Artículos: ancho y fotos ---------- */
.doc.article{max-width:880px;padding-left:20px;padding-right:20px}
.post-img{margin:36px 0}
.post-img img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius-md);background:var(--mist)}
.post-img figcaption{margin-top:8px;font-size:13px;color:var(--ink-soft)}
.post-img figcaption a{color:var(--ink-soft)!important}
.post-hero{margin:8px 0 36px}
.post-hero img{aspect-ratio:16/9}
@media (max-width:640px){.doc.article{padding-left:16px;padding-right:16px}.post-img{margin:28px -16px}.post-img img{border-radius:0}.post-img figcaption{padding:0 16px}}