/* ───────────────────────────────────────────────────────────────
   Revisit · Guías — estilo compartido (HTML estático crawlable).
   Tokens calcados de src/index.css (web real). Editorial long-read:
   crema/piedra, tinta casi negra, pasteles semánticos como acento,
   sombras sutiles. Cabinet Grotesk + Satoshi.
   ─────────────────────────────────────────────────────────────── */
:root{
  --bg:hsl(45 14% 97%);
  --ink:hsl(40 10% 10%);
  --ink-soft:hsl(40 8% 24%);
  --card:#ffffff;
  --muted:hsl(40 13% 95%);
  --accent:hsl(35 20% 93%);
  --muted-fg:hsl(40 5% 42%);
  --faint:hsl(40 5% 55%);
  --border:hsl(40 16% 90%);
  --border-strong:hsl(40 13% 84%);
  /* Pasteles semánticos (de index.css) — acentos con gusto */
  --green-soft:hsl(122 39% 93%);   --green-text:hsl(122 46% 30%);
  --amber-soft:hsl(46 100% 92%);   --amber-text:hsl(24 80% 38%);
  --blue-soft:hsl(217 88% 95%);    --blue-text:hsl(211 79% 38%);
  --rose-soft:hsl(340 80% 95%);    --rose-text:hsl(0 60% 42%);
  --orange-text:hsl(24 60% 38%);
  --display:'Cabinet Grotesk',sans-serif;
  --body:'Satoshi',sans-serif;
  --shadow-sm:0 1px 2px rgba(26,25,23,.06);
  --shadow-md:0 4px 14px rgba(26,25,23,.08);
  --shadow-lg:0 12px 34px rgba(26,25,23,.12);
  --r:16px; --r-sm:11px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth; font-size:17px;}
body{font-family:var(--body); background:var(--bg); color:var(--ink); line-height:1.7; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
h1,h2,h3,h4{font-family:var(--display); font-weight:700; letter-spacing:-.02em; line-height:1.13;}
a{color:var(--ink); text-decoration:none; text-underline-offset:3px;}
a:hover{text-decoration:underline; text-decoration-color:var(--border-strong);}
.wrap{max-width:720px; margin:0 auto; padding:0 24px;}
.wrap-wide{max-width:1080px; margin:0 auto; padding:0 24px;}

/* ── Topbar — réplica exacta de la navbar real de revisit.es ── */
.topbar{border-bottom:1px solid var(--border); background:hsl(45 14% 97% / .85); backdrop-filter:blur(10px); position:sticky; top:0; z-index:30;}
.topbar .bar{max-width:1280px; margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; height:64px; gap:16px;}
.topbar img{height:23px; display:block; width:auto;}
.topbar .links{display:flex; gap:32px; font-family:var(--body); font-size:14px;}
.topbar .links a{color:var(--muted-fg);}
.topbar .links a:hover{color:var(--ink); text-decoration:none;}
.topbar .actions{display:flex; align-items:center; gap:6px;}
.topbar .ghost{font-family:var(--body); font-size:14px; color:var(--ink); padding:8px 12px; border-radius:var(--r-sm);}
.topbar .ghost:hover{background:var(--muted); text-decoration:none;}
.topbar .cta-mini{font-family:var(--body); font-size:14px; font-weight:600; background:var(--ink); color:var(--bg); padding:9px 18px; border-radius:var(--r-sm); transition:opacity .2s;}
.topbar .cta-mini:hover{text-decoration:none; opacity:.85;}
@media (max-width:760px){.topbar .links{display:none;}}
@media (max-width:430px){.topbar .ghost{display:none;}}

/* ── Hero ── */
.hero{border-bottom:1px solid var(--border); background:linear-gradient(180deg,var(--accent) 0%,var(--bg) 100%);}
.hero .hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; padding:56px 0 60px;}
.crumbs{font-family:var(--body); font-size:12.5px; color:var(--faint); margin-bottom:22px;}
.crumbs a{color:var(--faint);} .crumbs a:hover{color:var(--ink);}
.crumbs span{color:var(--muted-fg);}
.eyebrow{font-family:var(--body); text-transform:uppercase; letter-spacing:.18em; font-size:11px; font-weight:600; color:var(--orange-text); margin-bottom:18px;}
.hero h1{font-size:clamp(34px,4.6vw,54px); line-height:1.04; margin-bottom:20px; color:var(--ink);}
.hero h1 .o{color:inherit;}
.hero .lede{font-size:clamp(18px,2.2vw,21px); color:var(--muted-fg); max-width:540px; line-height:1.5;}
.meta{font-family:var(--body); font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--faint); margin-top:26px; display:flex; gap:14px; flex-wrap:wrap;}
.meta span:not(:first-child){padding-left:14px; border-left:1px solid var(--border-strong);}
.hero-art{display:flex; justify-content:center;}
.hero-art img{width:100%; max-width:320px; height:auto; border-radius:var(--r); box-shadow:var(--shadow-lg);}
/* Mockup de tarjeta wallet (hecho a mano, como la home) */
.walletcard{background:radial-gradient(130% 120% at 82% 0%, hsl(40 8% 19%) 0%, var(--ink) 58%); color:var(--bg); border-radius:18px; padding:24px; width:100%; max-width:300px; box-shadow:var(--shadow-lg); border:1px solid rgba(247,245,240,.06);}
.walletcard .wc-top{display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:500; margin-bottom:22px;}
.walletcard .wc-logo{width:28px; height:28px; border-radius:8px; background:var(--bg); display:flex; align-items:center; justify-content:center;}
.walletcard .wc-logo img{height:15px; width:auto;}
.walletcard .wc-label{text-transform:uppercase; letter-spacing:.16em; font-size:10px; opacity:.5; margin-bottom:14px;}
.walletcard .wc-stamps{display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:20px;}
.walletcard .wc-dot{aspect-ratio:1; border-radius:50%; border:1.5px dashed rgba(247,245,240,.35); background-position:center; background-repeat:no-repeat; background-size:55%;}
.walletcard .wc-dot.on{border:1.5px solid var(--bg); background-color:var(--bg); background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%231c1a17" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 8h1a4 4 0 1 1 0 8h-1"/><path d="M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z"/><path d="M6 2v2"/><path d="M10 2v2"/><path d="M14 2v2"/></svg>');}
.walletcard .wc-foot{font-size:12.5px; opacity:.78; border-top:1px solid rgba(247,245,240,.14); padding-top:15px;}
@media (max-width:880px){
  .hero .hero-grid{grid-template-columns:1fr; gap:36px; padding:36px 0 44px;}
  .hero-art{order:-1; justify-content:flex-start;}
  .hero-art img,.hero-art .frame{max-width:240px;}
}

/* ── Layout artículo: rail TOC + contenido ── */
.article{display:grid; grid-template-columns:200px minmax(0,1fr); gap:60px; padding:48px 0 8px; align-items:start;}
.toc-rail{position:sticky; top:84px; font-family:var(--body);}
.toc-rail h4{text-transform:uppercase; letter-spacing:.14em; font-size:11px; color:var(--faint); margin-bottom:14px; font-weight:600;}
.toc-rail ol{list-style:none; counter-reset:t; margin:0; padding:0; border-left:1px solid var(--border); }
.toc-rail li{counter-increment:t; margin:0;}
.toc-rail a{display:block; font-size:13.5px; color:var(--muted-fg); padding:7px 0 7px 16px; margin-left:-1px; border-left:1px solid transparent; line-height:1.35;}
.toc-rail a:hover{color:var(--ink); text-decoration:none; border-left-color:var(--ink);}
@media (max-width:1000px){
  .article{grid-template-columns:1fr; gap:0;}
  .toc-rail{position:static; background:var(--muted); border:1px solid var(--border); border-radius:var(--r); padding:22px 26px; margin-bottom:36px;}
  .toc-rail ol{border-left:none; columns:2; column-gap:28px;}
  .toc-rail a{padding:6px 0; border-left:none;}
}
@media (max-width:560px){.toc-rail ol{columns:1;}}

/* ── Prose ── */
.prose{min-width:0;}
.prose > p{font-size:17.5px; color:var(--ink-soft); margin-bottom:22px;}
.prose h2{font-size:clamp(25px,3vw,33px); margin:54px 0 16px; scroll-margin-top:82px; color:var(--ink);}
.prose h3{font-size:20px; margin:32px 0 10px; color:var(--ink); letter-spacing:-.01em;}
.prose ul,.prose ol{margin:0 0 22px 0; padding-left:20px; color:var(--ink-soft);}
.prose li{margin-bottom:10px;}
.prose li::marker{color:var(--faint);}
.prose strong{color:var(--ink); font-weight:600;}
.prose blockquote{position:relative; border:none; background:var(--accent); border-radius:var(--r); padding:30px 32px 30px 34px; margin:34px 0; font-family:var(--display); font-weight:500; color:var(--ink); font-size:22px; line-height:1.36; letter-spacing:-.01em;}
.prose blockquote::before{content:"\201C"; position:absolute; top:6px; left:14px; font-family:var(--display); font-size:54px; color:var(--border-strong); line-height:1;}
.prose blockquote{padding-left:54px;}

/* Callout (nota destacada con pastel) */
.callout{display:flex; gap:14px; background:var(--blue-soft); border-radius:var(--r); padding:20px 22px; margin:28px 0; font-size:15.5px; color:var(--ink-soft);}
.callout svg{flex-shrink:0; width:22px; height:22px; color:var(--blue-text); margin-top:1px;}
.callout strong{color:var(--ink);}

/* ── Tarjetas numeradas (listicle) con icono + tag pastel ── */
.kind{background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:26px 28px 22px; margin:18px 0; box-shadow:var(--shadow-sm); transition:box-shadow .25s, transform .25s;}
.kind:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.kind .head{display:flex; align-items:center; gap:15px; margin-bottom:10px;}
.kind .ico{flex-shrink:0; width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--accent);}
.kind .ico svg{width:23px; height:23px; color:var(--ink); stroke-width:1.7;}
.kind .head .n{font-family:var(--display); font-size:13px; font-weight:700; color:var(--faint); letter-spacing:.05em;}
.kind h3{font-size:21px; margin:2px 0 0; color:var(--ink); letter-spacing:-.01em; line-height:1.2;}
.kind p{color:var(--ink-soft); font-size:16px; margin:10px 0 0;}
.kind .who{font-family:var(--body); font-size:14px; color:var(--muted-fg); margin-top:16px;}
.tag{display:inline-block; font-family:var(--body); font-size:12.5px; font-weight:600; padding:4px 11px; border-radius:999px; background:var(--green-soft); color:var(--green-text); margin-top:14px;}
.tag.amber{background:var(--amber-soft); color:var(--amber-text);}
.tag.blue{background:var(--blue-soft); color:var(--blue-text);}
.tag.rose{background:var(--rose-soft); color:var(--rose-text);}

/* ── Figura (visual de producto) ── */
figure.fig{margin:30px 0; text-align:center;}
figure.fig img{max-width:100%; height:auto; border-radius:var(--r); border:1px solid var(--border); box-shadow:var(--shadow-md);}
figure.fig.card img{max-width:300px; box-shadow:var(--shadow-lg); border:none;}
figure.fig figcaption{font-family:var(--body); font-size:13px; color:var(--faint); margin-top:12px;}
.wallet-btns{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:6px 0 0;}
.wallet-btns img{height:44px; width:auto; border:none; box-shadow:none; border-radius:0;}

/* ── Tabla comparativa ── */
.table-scroll{overflow-x:auto; margin:26px 0; border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow-sm);}
table{border-collapse:collapse; width:100%; font-family:var(--body); font-size:14.5px; background:var(--card);}
th,td{padding:14px 16px; text-align:left; border-bottom:1px solid var(--border); vertical-align:top;}
thead th{background:var(--ink); color:var(--bg); font-weight:600; font-size:13px; border-bottom:none;}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:none;}
tbody th{font-weight:600; color:var(--ink);}
tbody tr:nth-child(even) td,tbody tr:nth-child(even) th{background:hsl(40 13% 97.5%);}

/* ── FAQ ── */
.faq{border-top:1px solid var(--border); padding:46px 0;}
.faq h2{font-size:clamp(25px,3vw,33px); margin-bottom:6px; color:var(--ink);}
details{border-bottom:1px solid var(--border); padding:18px 0;}
details summary{font-family:var(--display); font-weight:700; font-size:18px; color:var(--ink); cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; letter-spacing:-.01em;}
details summary::-webkit-details-marker{display:none;}
details summary::after{content:"+"; color:var(--faint); font-size:22px; font-weight:400; line-height:1; transition:transform .2s;}
details[open] summary::after{transform:rotate(45deg);}
details p{color:var(--ink-soft); font-size:16.5px; margin-top:14px;}

/* ── Relacionados ── */
.related{background:var(--muted); border:1px solid var(--border); border-radius:var(--r); padding:28px 30px; margin:14px 0 0;}
.related h4{font-family:var(--body); text-transform:uppercase; letter-spacing:.14em; font-size:11px; color:var(--faint); margin-bottom:14px; font-weight:600;}
.related a{display:block; font-family:var(--display); font-weight:700; font-size:17px; color:var(--ink); padding:11px 0; border-top:1px solid var(--border); letter-spacing:-.01em;}
.related a:first-of-type{border-top:none;}
.related a:hover{color:var(--orange-text); text-decoration:none;}

/* ── CTA ── */
.cta{position:relative; overflow:hidden; text-align:center; background:var(--ink); color:var(--bg); border-radius:var(--r); padding:54px 40px; margin:52px 0; box-shadow:var(--shadow-md);}
.cta h2{color:var(--bg); font-size:clamp(24px,3.2vw,32px); margin-bottom:14px; letter-spacing:-.02em;}
.cta p{color:hsl(45 14% 97% / .72); max-width:460px; margin:0 auto 26px; font-size:16px;}
.cta a{display:inline-block; background:var(--bg); color:var(--ink); font-family:var(--body); font-weight:600; font-size:15.5px; padding:14px 30px; border-radius:var(--r-sm); transition:opacity .2s;}
.cta a:hover{text-decoration:none; opacity:.88;}

/* ── Footer completo (como la home) ── */
.site-footer{border-top:1px solid var(--border); padding:52px 0 56px; margin-top:20px;}
.site-footer .cols{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:32px; margin-bottom:40px;}
.site-footer img{height:22px; margin-bottom:12px;}
.site-footer .tagline{font-size:14px; color:var(--muted-fg); max-width:220px;}
.site-footer h5{font-family:var(--body); font-size:14px; font-weight:600; color:var(--ink); margin-bottom:14px;}
.site-footer ul{list-style:none;}
.site-footer li{margin-bottom:9px;}
.site-footer li a{font-size:14px; color:var(--muted-fg);}
.site-footer li a:hover{color:var(--ink); text-decoration:none;}
.site-footer .base{border-top:1px solid var(--border); padding-top:22px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--faint);}
@media (max-width:760px){.site-footer .cols{grid-template-columns:1fr 1fr; gap:28px;}}
@media (max-width:440px){.site-footer .cols{grid-template-columns:1fr;}}