/* ═══════════════════════════════════════════════════════════════
   BNKA · Subpáginas del sitio (blog, ayuda, legal, producto)
   Extiende landing.css: mismos tokens, mismos componentes. Aquí solo
   viven las piezas que la home no necesita (cabecera de página,
   tarjetas de artículo, índice lateral, cuerpo de texto del CMS).
   No redefinir tokens: si falta uno, va a landing.css.
   ═══════════════════════════════════════════════════════════════ */

/* En las subpáginas no hay vídeo detrás del nav: la barra nace ya en
   vidrio y el contenido empieza bajo ella. */
.nav.nav-solid{
  background:rgba(15,16,19,.86);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:0 1px 0 rgba(247,243,236,.08);
}
.nav-links a[aria-current="page"]{color:#fff}
/* El menú del CMS trae cinco entradas largas: hasta 1200px se aprieta un
   punto y "Iniciar sesión" espera al ancho grande, para que no salte de línea. */
@media(min-width:900px) and (max-width:1199px){
  .nav-links{gap:14px}
  .nav-links a{font-size:.84rem}
  .nav-signin{display:none}
}

/* Menú móvil: el mismo desplegable en vidrio del nav */
.nav-burger{
  display:inline-grid; place-items:center; width:40px; height:40px;
  border:1px solid rgba(247,243,236,.25); border-radius:12px; background:transparent;
  color:var(--snow); cursor:pointer;
}
.nav-burger span{display:block; width:18px; height:2px; background:currentColor; border-radius:2px; position:relative}
.nav-burger span::before,.nav-burger span::after{
  content:""; position:absolute; left:0; width:18px; height:2px; background:currentColor; border-radius:2px;
}
.nav-burger span::before{top:-6px}
.nav-burger span::after{top:6px}
.nav-menu{
  display:none; position:absolute; top:100%; left:0; right:0;
  background:rgba(15,16,19,.96); border-bottom:1px solid rgba(247,243,236,.1);
  padding:8px 24px 18px;
}
.nav.menu-open .nav-menu{display:grid; gap:2px}
.nav-menu a{color:var(--snow-70); text-decoration:none; padding:11px 2px; font-weight:500; border-bottom:1px solid rgba(247,243,236,.06)}
.nav-menu a:hover{color:#fff}
.nav-menu a.nav-menu-sub{padding-left:16px; font-size:.92rem; color:var(--snow-50)}
.nav-menu-group{margin-top:10px; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--coral-300); font-weight:700}
@media(min-width:900px){.nav-burger,.nav-menu{display:none!important}}

/* Submenús de escritorio */
.nav-links .has-sub{position:relative}
.nav-links .has-sub > a::after{content:" ▾"; font-size:.7em; opacity:.7}
.nav-sub{
  position:absolute; top:100%; left:-8px; min-width:230px; display:none;
  background:var(--night-3); border:1px solid rgba(247,243,236,.12); border-radius:14px;
  padding:8px; box-shadow:0 20px 50px rgba(0,0,0,.45); z-index:5;
}
.nav-links .has-sub:hover .nav-sub,.nav-links .has-sub:focus-within .nav-sub{display:grid}
.nav-sub a{padding:9px 12px; border-radius:9px; font-size:.9rem; display:block}
.nav-sub a:hover{background:rgba(251,83,116,.12); color:#fff}

/* ── Cabecera de página: el hero de la home, sin escena ────── */
.page-hero{
  position:relative; overflow:hidden; color:var(--snow);
  background:
    radial-gradient(1100px 520px at 82% -10%, rgba(141,45,106,.35), transparent 65%),
    radial-gradient(900px 480px at -10% 110%, rgba(251,83,116,.16), transparent 60%),
    linear-gradient(175deg,#17141c 0%, var(--night) 55%, #121016 100%);
  padding:132px 0 64px;
}
.page-hero .hero-glow{bottom:-420px; opacity:.7}
.page-hero-inner{position:relative; display:grid; gap:36px; align-items:center}
.page-hero-copy{max-width:760px}
.page-title{font-size:clamp(2rem,4.8vw,3.4rem); font-weight:800; letter-spacing:-.02em; line-height:1.1}
.page-sub{margin-top:18px; max-width:640px; font-size:clamp(1rem,1.4vw,1.15rem); color:var(--snow-70)}
.page-hero-media img{width:100%; height:auto; display:block; filter:drop-shadow(0 34px 60px rgba(0,0,0,.55))}
.page-hero .hero-ctas{margin-top:26px}
.page-hero-compact{padding:124px 0 44px}
@media(min-width:1024px){
  .page-hero{padding:150px 0 84px}
  .page-hero-inner.with-media{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:48px}
  /* Con imagen al lado el título tiene media columna: un punto menos de cuerpo */
  .page-hero-inner.with-media .page-title{font-size:clamp(1.9rem,3.6vw,2.8rem)}
  .page-hero-media img{max-width:440px; margin-inline:auto}
}

/* Migas */
.crumbs{display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:.82rem; color:var(--snow-50); margin-bottom:22px}
.crumbs a{color:var(--snow-70); text-decoration:none}
.crumbs a:hover{color:#fff}
.crumbs span[aria-current]{color:var(--snow)}
.crumbs li{display:inline-flex; gap:8px; align-items:center; list-style:none}
.crumbs li+li::before{content:"/"; color:rgba(247,243,236,.3)}
.crumbs ol{display:contents; margin:0; padding:0}
.section-ivory .crumbs,.section-white .crumbs{color:var(--muted)}
.section-ivory .crumbs a,.section-white .crumbs a{color:var(--muted)}
.section-ivory .crumbs a:hover,.section-white .crumbs a:hover{color:var(--ink)}
.section-ivory .crumbs span[aria-current],.section-white .crumbs span[aria-current]{color:var(--ink)}

/* Filtros de categoría del blog: mismas píldoras que las pestañas de intención */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:26px}
.chip{
  border:1px solid rgba(247,243,236,.22); color:var(--snow-70); text-decoration:none;
  padding:8px 16px; border-radius:999px; font-weight:600; font-size:.88rem;
  transition:all .2s; white-space:nowrap; background:rgba(247,243,236,.04);
}
.chip:hover{color:#fff; border-color:var(--coral-300); transform:translateY(-1px)}
.chip[aria-current="page"]{background:var(--coral-text); border-color:transparent; color:#fff; box-shadow:var(--shadow-coral)}

/* ── Tarjetas de artículo (misma familia que .story y .step) ─ */
.posts{display:grid; gap:20px; grid-template-columns:1fr}
.post{
  display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  transition:transform .35s var(--ease), box-shadow .35s, border-color .3s;
}
.post:hover{transform:translateY(-4px); box-shadow:var(--shadow-soft); border-color:var(--coral-300)}
.post-media{display:block; aspect-ratio:16/10; overflow:hidden; background:var(--rose-100)}
.post-media img{width:100%; height:100%; object-fit:cover; display:block}
.post-body{padding:22px 24px 24px; display:grid; gap:10px; flex:1}
.post-meta{display:flex; flex-wrap:wrap; gap:8px 14px; font-size:.78rem; color:var(--muted); align-items:center}
.post-cat{
  font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:.68rem;
  color:var(--coral-text); background:var(--rose-100); border:1px solid var(--rose-200);
  border-radius:999px; padding:3px 10px; text-decoration:none;
}
.post h3{font-size:1.08rem; line-height:1.3}
.post h3 a{text-decoration:none; color:var(--ink)}
.post h3 a:hover{color:var(--coral-text)}
.post p{color:var(--muted); font-size:.94rem}
.post-more{margin-top:auto; font-weight:600; color:var(--coral-text); text-decoration:none; font-size:.9rem}
.post-more:hover{color:var(--coral-hover)}
@media(min-width:640px){.posts{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.posts{grid-template-columns:repeat(3,1fr)}}

/* Destacado: la tarjeta ancha del bento */
.post-featured{
  display:grid; gap:0; overflow:hidden; margin-bottom:28px;
  background:linear-gradient(120deg,#fff 30%, var(--rose-100) 75%, var(--rose-200));
  border:1px solid var(--line); border-radius:var(--radius-xl); box-shadow:var(--shadow-soft);
}
.post-featured .post-media{aspect-ratio:16/10}
.post-featured .post-body{padding:32px}
.post-featured h2{font-size:clamp(1.4rem,2.6vw,2rem); line-height:1.15}
.post-featured h2 a{text-decoration:none; color:var(--ink)}
.post-featured h2 a:hover{color:var(--coral-text)}
@media(min-width:900px){
  .post-featured{grid-template-columns:1.15fr 1fr; align-items:center}
  .post-featured .post-media{aspect-ratio:auto; height:100%; min-height:320px}
}

/* Paginación en píldoras */
.pager{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:44px}
.pager a,.pager span{
  display:inline-grid; place-items:center; min-width:40px; height:40px; padding:0 12px;
  border-radius:999px; border:1px solid var(--line); color:var(--muted);
  text-decoration:none; font-weight:600; background:#fff; transition:all .2s;
}
.pager a:hover{border-color:var(--coral-300); color:var(--ink); transform:translateY(-1px)}
.pager span[aria-current]{background:var(--coral-text); border-color:transparent; color:#fff; box-shadow:var(--shadow-coral)}

/* ── Artículo ──────────────────────────────────────────────── */
.article-hero .page-hero-copy{max-width:820px}
.article-meta{display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:22px; font-size:.86rem; color:var(--snow-50)}
.article-meta strong{color:var(--snow-70); font-weight:600}
.article-cover{
  margin:-40px auto 0; max-width:900px; border-radius:var(--radius-xl); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow-card); position:relative; z-index:2;
  background:#fff;
}
.article-cover img{width:100%; display:block}
.article-layout{display:grid; gap:44px; align-items:start}
.article-side{display:grid; gap:20px}
.takeaways{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px;
  box-shadow:var(--shadow-soft);
}
.takeaways h3{font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--coral-text); margin-bottom:12px; font-family:var(--font-body)}
.takeaways ul{margin:0; padding:0 0 0 18px; color:var(--muted); font-size:.93rem; display:grid; gap:8px}
.article-share{display:flex; gap:10px; flex-wrap:wrap}
@media(min-width:1024px){
  .article-layout{grid-template-columns:minmax(0,1fr) 300px}
  .article-side{position:sticky; top:96px}
}

/* Cuerpo de texto que llega del CMS: artículos, términos, respuestas */
.prose{color:var(--ink); font-size:1.06rem; line-height:1.78; max-width:72ch}
.prose > :first-child{margin-top:0}
.prose h2,.prose h3,.prose h4{margin:1.9em 0 .6em; line-height:1.2}
.prose h2{font-size:clamp(1.45rem,2.4vw,1.85rem)}
.prose h3{font-size:clamp(1.15rem,1.9vw,1.35rem)}
.prose h4{font-size:1.05rem}
.prose p{margin:0 0 1.15em; color:#2E3238}
.prose a{color:var(--coral-text); text-decoration:underline; text-underline-offset:3px}
.prose a:hover{color:var(--coral-hover)}
.prose strong{color:var(--ink); font-weight:700}
.prose ul,.prose ol{margin:0 0 1.15em; padding-left:1.3em}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin:.35em 0; color:#2E3238}
.prose li::marker{color:var(--coral)}
.prose blockquote{margin:1.6em 0; padding:4px 0 4px 22px; border-left:3px solid var(--coral); color:var(--ink); font-weight:500}
.prose img{max-width:100%; height:auto; border-radius:var(--radius); margin:1.6em 0; display:block}
.prose figure{margin:1.6em 0}
.prose figcaption{font-size:.85rem; color:var(--muted); margin-top:8px}
.prose hr{border:0; border-top:1px solid var(--line); margin:2.2em 0}
.prose table{width:100%; border-collapse:collapse; margin:1.6em 0; font-size:.94rem; display:block; overflow-x:auto}
.prose th,.prose td{border:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top}
.prose th{background:var(--ivory); color:var(--ink); font-weight:700}
/* Iconos que el editor mete dentro de celdas: que no se conviertan en pósters */
.prose td img,.prose th img{max-width:40px; max-height:40px; margin:0; display:inline-block; vertical-align:middle}
.prose h3 img{max-width:36px; margin:0 10px 0 0; display:inline-block; vertical-align:middle}
.prose iframe{max-width:100%}
.prose-wide{max-width:none}

/* ── Índice de documentos / preguntas (lateral) ────────────── */
.docs-layout{display:grid; gap:40px; align-items:start}
.docs-index{display:grid; gap:2px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:12px; box-shadow:var(--shadow-soft)}
.docs-index h3{font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--coral-text); padding:10px 12px 8px; font-family:var(--font-body)}
.docs-index a{
  display:block; padding:10px 12px; border-radius:10px; text-decoration:none; color:var(--muted);
  font-size:.92rem; border-left:2px solid transparent; transition:all .2s;
}
.docs-index a:hover{color:var(--ink); background:var(--ivory)}
.docs-index a[aria-current="page"]{color:var(--ink); font-weight:600; background:var(--rose-100); border-left-color:var(--coral)}
.docs-index .docs-ext::after{content:" ↗"; opacity:.6}
.doc-actions{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:26px}
.doc-body{background:#fff; border:1px solid var(--line); border-radius:var(--radius-xl); padding:clamp(24px,4vw,48px); box-shadow:var(--shadow-soft)}
.doc-body .prose{max-width:none}
@media(min-width:1024px){
  .docs-layout{grid-template-columns:300px minmax(0,1fr)}
  .docs-index{position:sticky; top:96px; max-height:calc(100vh - 120px); overflow:auto}
}

/* Tarjetas de categoría (ayuda, regiones legales): familia .corridor */
.cards-list{display:grid; gap:16px}
.card-row{
  display:flex; align-items:center; gap:20px; padding:22px 24px; text-decoration:none;
  background:linear-gradient(160deg,var(--ivory), #fff 55%); border:1px solid var(--line);
  border-radius:var(--radius-lg); color:inherit;
  transition:transform .35s var(--ease), box-shadow .35s, border-color .3s;
}
.card-row:hover{transform:translateY(-3px); border-color:var(--coral-300); box-shadow:var(--shadow-soft)}
.card-row img{width:64px; height:64px; object-fit:contain; flex:none}
.card-row .i3d img{width:40px; height:40px}
.card-row-body{flex:1; min-width:0}
.card-row h3{font-size:1.08rem; margin-bottom:4px}
.card-row p{color:var(--muted); font-size:.93rem}
.card-row-arrow{flex:none; color:var(--coral); font-weight:700; transition:transform .25s var(--ease)}
.card-row:hover .card-row-arrow{transform:translateX(4px)}
.cards-2{grid-template-columns:1fr}
@media(min-width:760px){.cards-2{grid-template-columns:repeat(2,1fr)}}

/* Grupo de preguntas dentro de una categoría */
.qa-group{margin-bottom:40px}
.qa-group h2{font-size:1.35rem; margin-bottom:6px}
.qa-group > p{color:var(--muted); margin-bottom:16px}
.faq-item .prose{padding:0 24px 22px; font-size:.98rem; max-width:none}
.faq-item .prose p{color:var(--muted)}
.help-cta{
  margin-top:40px; padding:28px; border-radius:var(--radius-lg);
  background:linear-gradient(160deg,#fff, var(--rose-100) 90%); border:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px;
}
.help-cta h3{font-size:1.15rem}
.help-cta p{color:var(--muted); font-size:.94rem; margin-top:4px}

/* ── Bloques de las páginas de producto ────────────────────── */
.feature-grid{display:grid; gap:20px; grid-template-columns:1fr}
.feature{
  background:linear-gradient(145deg,#fff, var(--rose-100)); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:30px; text-align:center;
  transition:transform .35s var(--ease), box-shadow .35s;
}
.feature:hover{transform:translateY(-4px); box-shadow:var(--shadow-soft)}
.feature img{width:120px; height:120px; object-fit:contain; margin:0 auto 18px}
.feature.feature-thumb img{width:88px; height:88px}
.feature h3{font-size:1.08rem; margin-bottom:8px}
.feature p{color:var(--muted); font-size:.95rem}
@media(min-width:700px){.feature-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.feature-grid.cols-3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.feature-grid.cols-4{grid-template-columns:repeat(4,1fr)}}

.split{display:grid; gap:36px; align-items:center}
.split-media img{width:100%; height:auto; display:block; border-radius:var(--radius-xl)}
.split-copy .checklist li strong{display:block; color:var(--ink)}
.split-copy .checklist{max-width:none}
@media(min-width:900px){
  .split{grid-template-columns:1fr 1fr; gap:56px}
  .split-media.on-right{order:2}
}

.quote-band{
  position:relative; overflow:hidden; border-radius:var(--radius-xl);
  border:1px solid var(--line); background:#fff; box-shadow:var(--shadow-soft);
  display:grid;
}
.quote-band img{width:100%; height:100%; object-fit:cover; display:block; min-height:240px}
.quote-band figure{margin:0; padding:32px; display:grid; gap:16px; align-content:center}
.quote-band blockquote{margin:0; font-size:1.08rem; line-height:1.6; color:var(--ink); font-weight:500}
@media(min-width:900px){.quote-band{grid-template-columns:1.1fr 1fr}}

.showcase{
  display:grid; gap:24px; align-items:center; padding:clamp(28px,4vw,48px); border-radius:var(--radius-xl);
  background:linear-gradient(175deg,#a4374c,#1c0d14 62%); color:#fff;
}
.showcase p{color:rgba(255,255,255,.78)}
.showcase .h2{color:#fff}
.showcase-card{
  justify-self:center; width:min(380px,100%); text-align:center; padding:28px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); border-radius:var(--radius-lg);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.showcase-card img{width:min(240px,80%); margin:0 auto 16px}
.showcase-card h3{color:#fff; font-size:1.15rem; margin-bottom:6px}
.showcase-card p{color:rgba(255,255,255,.75); font-size:.94rem}
@media(min-width:900px){.showcase{grid-template-columns:1.1fr 1fr}}

/* Vídeo de podcast (YouTube, carga al hacer clic) */
.episodes{display:grid; gap:24px}
.episode{
  display:grid; gap:0; overflow:hidden; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-soft);
}
.episode-video{position:relative; aspect-ratio:16/9; background:#0d0d0f}
.episode-video img,.episode-video iframe{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0}
.episode-play{
  position:absolute; inset:0; display:grid; place-items:center; border:0; background:transparent; cursor:pointer;
}
.episode-play span{
  display:grid; place-items:center; width:74px; height:74px; border-radius:50%;
  background:var(--coral); color:#fff; font-size:1.5rem; box-shadow:var(--shadow-coral);
  transition:transform .25s var(--ease);
}
.episode-play:hover span{transform:scale(1.06)}
.episode-body{padding:28px}
.episode-body .eyebrow{margin-bottom:10px}
.episode-body h3{font-size:1.2rem; line-height:1.3; margin-bottom:10px}
.episode-body p{color:var(--muted); font-size:.95rem}
@media(min-width:900px){.episode{grid-template-columns:1.2fr 1fr}}

/* Formulario de autoridades */
.form-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-xl); padding:clamp(24px,4vw,40px);
  box-shadow:var(--shadow-soft); display:grid; gap:18px; max-width:640px; margin-inline:auto;
}
.form-card label{display:grid; gap:8px; font-weight:600; font-size:.92rem}
.form-card input[type="email"],.form-card input[type="file"]{
  width:100%; border:1px solid var(--line); border-radius:12px; padding:12px 14px; font:inherit;
  background:var(--ivory); color:var(--ink);
}
.form-card input:focus-visible{outline:2px solid var(--coral); outline-offset:1px; border-color:transparent}
.form-card textarea{
  width:100%; border:1px solid var(--line); border-radius:12px; padding:12px 14px; font:inherit;
  background:var(--ivory); color:var(--ink); resize:vertical;
}
.form-card .form-check{display:flex; gap:10px; align-items:flex-start; font-weight:400; font-size:.88rem; color:var(--muted)}
.form-card .form-check input{margin-top:4px; accent-color:var(--coral)}
.form-card .form-check a{color:var(--coral-text)}
.form-help{font-size:.82rem; color:var(--muted)}
.form-msg{display:none; padding:12px 14px; border-radius:12px; font-size:.92rem}
.form-msg.ok{display:block; background:#E7F6EE; color:#0B8A4B; border:1px solid #BFE7D0}
.form-msg.ko{display:block; background:var(--rose-100); color:#B3213F; border:1px solid var(--rose-200)}

/* Franja con foto de fondo (bloque section-background-image) */
.photo-band{
  background-image:linear-gradient(90deg, rgba(20,8,15,.92) 0%, rgba(20,8,15,.55) 55%, rgba(20,8,15,.25) 100%), var(--bg-m);
  background-size:cover; background-position:center;
}
@media(min-width:900px){.photo-band{background-image:linear-gradient(90deg, rgba(20,8,15,.9) 0%, rgba(20,8,15,.45) 50%, rgba(20,8,15,.15) 100%), var(--bg)}}

/* Conversión (bloque section-swap): texto centrado con dos monedas flotando */
.swap-band{
  position:relative; text-align:center; padding:clamp(28px,5vw,56px) clamp(18px,4vw,64px);
  background:linear-gradient(145deg,#fff, var(--rose-100)); border:1px solid var(--line);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-soft); overflow:hidden;
}
.swap-copy{position:relative; z-index:1; max-width:640px; margin-inline:auto}
.swap-coin{position:absolute; width:clamp(90px,14vw,170px); height:auto; filter:drop-shadow(0 18px 28px rgba(25,28,31,.28)); animation:floaty 7s ease-in-out infinite; opacity:.95}
.swap-coin-l{left:-2%; bottom:-6%; --r:-8deg}
.swap-coin-r{right:-2%; top:-8%; --r:8deg; animation-delay:-3s}
@media(max-width:700px){.swap-coin{width:70px; opacity:.6}}

/* Utilidades de sección */
.section-tight{padding:64px 0}
.section-head-center{text-align:center}
.section-head-center .lede{margin-inline:auto}
.grid-2{display:grid; gap:20px; grid-template-columns:1fr}
@media(min-width:760px){.grid-2{grid-template-columns:repeat(2,1fr)}}
.muted{color:var(--muted)}
.lede-dark{color:var(--snow-70)}
.empty{
  padding:40px; text-align:center; color:var(--muted); background:#fff; border:1px dashed var(--line);
  border-radius:var(--radius-lg);
}