/* ============================================================
   Brevia · estilos de páginas de contenido (artículos, ayuda, legal).
   Fondo claro de lectura, a marca. Independiente del scrollytelling del home.
   Reutiliza las variables y la nav/footer/botones de styles.css.
   ============================================================ */
.content-main{max-width:760px;margin:0 auto;padding:clamp(110px,14vh,150px) 24px clamp(70px,10vw,110px);position:relative;z-index:1}
.content-wide{max-width:1080px}

/* el fondo de estas páginas es claro y estable (no el cielo animado) */
body.page-content{background:var(--dawn-bg,#F6F4FE);color:var(--dawn-ink,#15132E)}
body.page-content .sky,body.page-content .day-sky,body.page-content #stars,
body.page-content .sky__horizon{display:none !important}
body.page-content .nav.scrolled{background:rgba(246,244,254,.86);border-bottom-color:var(--dawn-line,rgba(123,91,255,.18))}
body.page-content .nav .brand__word{color:var(--dawn-ink,#15132E)}
body.page-content footer .brand__word{color:#fff}
body.page-content .nav__links a{color:var(--dawn-muted,#5D5A85)}
body.page-content .nav__links a:hover{color:var(--dawn-ink,#15132E)}
body.page-content .lang__btn{color:var(--dawn-muted,#5D5A85);text-decoration:none}
body.page-content .lang__btn[aria-pressed="true"]{color:var(--violet-ink,#6243D6)}
body.page-content a.lang__btn:hover{color:var(--violet-ink,#6243D6)}
.lang__btn--off{opacity:.4;cursor:not-allowed}

/* cabecera de página */
.page-head{margin-bottom:38px}
.page-kicker{display:inline-flex;align-items:center;gap:10px;font:800 11px 'Plus Jakarta Sans',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--violet-ink,#6243D6);margin-bottom:14px}
.page-kicker::before{content:"";width:24px;height:1.5px;background:currentColor}
.page-title{font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(30px,5.2vw,46px);letter-spacing:-.025em;line-height:1.1;color:var(--dawn-ink,#15132E)}
.page-sub{margin-top:14px;font-size:18px;color:var(--dawn-muted,#5D5A85);max-width:60ch}
.page-meta{margin-top:16px;font:600 12.5px 'Spline Sans Mono',monospace;color:var(--dawn-muted,#5D5A85);letter-spacing:.02em}
.crumbs{font:600 12.5px 'Spline Sans Mono',monospace;color:var(--dawn-muted,#5D5A85);margin-bottom:18px}
.crumbs a{color:var(--violet-ink,#6243D6);text-decoration:none}
.crumbs a:hover{text-decoration:underline}

/* prosa */
.prose{font-size:17.5px;line-height:1.75;color:#2a2942}
.prose h2{font-family:'Sora',sans-serif;font-weight:800;font-size:27px;letter-spacing:-.02em;color:var(--dawn-ink,#15132E);margin:42px 0 12px}
.prose h3{font-family:'Sora',sans-serif;font-weight:700;font-size:21px;color:var(--dawn-ink,#15132E);margin:30px 0 10px}
.prose p{margin:0 0 18px}
.prose a{color:var(--violet-ink,#6243D6);text-decoration:underline;text-underline-offset:2px}
.prose ul,.prose ol{margin:0 0 18px 0;padding-left:22px}
.prose li{margin-bottom:8px}
.prose strong{color:var(--dawn-ink,#15132E)}
.prose blockquote{border-left:4px solid var(--violet,#7B5BFF);padding:4px 0 4px 20px;margin:22px 0;color:var(--dawn-muted,#5D5A85);font-style:italic}
.prose code{font-family:'Spline Sans Mono',monospace;font-size:.9em;background:rgba(123,91,255,.1);padding:2px 6px;border-radius:6px;color:var(--violet-ink,#6243D6)}
.prose pre{background:#0C1030;color:#EEEFFA;padding:18px 20px;border-radius:14px;overflow:auto;margin:0 0 18px}
.prose pre code{background:none;color:inherit;padding:0}
.prose hr{border:none;border-top:1px solid var(--dawn-line,rgba(123,91,255,.18));margin:34px 0}
.prose img{max-width:100%;border-radius:14px}
/* tablas dentro de la prosa (comparativas / pricing = GEO hooks) */
.prose table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:15px}
.prose th,.prose td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--dawn-line,rgba(123,91,255,.18));vertical-align:top}
.prose th{background:rgba(123,91,255,.08);font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--violet-ink,#6243D6)}
/* scroller del wrapper inyectado por rehypeWrapTables (build-time). En desktop la
   tabla cabe en la columna de 760px → sin scrollbar, invisible. */
.table-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* answer-first lede (lo que levantan los snippets y las IA) */
.answer-lede{margin-top:16px;font-size:19px;line-height:1.6;color:var(--dawn-ink,#15132E);font-weight:500;
  border-left:4px solid var(--lime,#C9F94E);background:rgba(201,249,78,.08);padding:16px 20px;border-radius:0 14px 14px 0}

/* FAQ block (también JSON-LD FAQPage) */
.faq-block{margin-top:44px}
.faq-block h2{font-family:'Sora',sans-serif;font-weight:800;font-size:24px;color:var(--dawn-ink,#15132E);margin-bottom:16px}
.faq-item{border:1px solid var(--dawn-line,rgba(123,91,255,.18));border-radius:14px;border-bottom-left-radius:4px;background:#fff;margin-bottom:10px;overflow:hidden}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;font-family:'Sora',sans-serif;font-weight:700;font-size:16px;color:var(--dawn-ink,#15132E)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:22px;color:var(--violet-ink,#6243D6);transition:transform .25s;flex:none}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{padding:0 20px 16px;font-size:15px;color:var(--dawn-muted,#5D5A85);line-height:1.6;margin:0}

/* fuentes citadas (regla anti-stats inventadas: toda cifra trae fuente real) */
.sources-block{margin-top:40px;padding-top:22px;border-top:1px solid var(--dawn-line,rgba(123,91,255,.18))}
.sources-block h2{font-family:'Spline Sans Mono',monospace;font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dawn-muted,#5D5A85);margin-bottom:12px}
.sources-block ul{list-style:none;padding:0;margin:0;display:grid;gap:7px}
.sources-block li{font-size:13.5px}
.sources-block a{color:var(--violet-ink,#6243D6);text-decoration:none;border-bottom:1px solid var(--dawn-line,rgba(123,91,255,.18))}
.sources-block a:hover{border-bottom-color:var(--violet,#7B5BFF)}

/* listados (cards de artículo / ayuda) */
.cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px;margin-top:8px}
.ccard{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--dawn-line,rgba(123,91,255,.18));border-radius:18px;border-bottom-left-radius:6px;padding:22px 22px 20px;transition:transform .25s cubic-bezier(.22,.8,.24,1),box-shadow .25s,border-color .25s}
.ccard:hover{transform:translateY(-4px);box-shadow:0 22px 50px -30px rgba(21,19,46,.4);border-color:var(--line-strong,rgba(123,91,255,.34))}
.ccard h3{font-family:'Sora',sans-serif;font-weight:700;font-size:18.5px;color:var(--dawn-ink,#15132E);margin:0 0 8px;letter-spacing:-.01em}
.ccard p{font-size:14px;color:var(--dawn-muted,#5D5A85);margin:0 0 12px;line-height:1.55}
.ccard .ccard-meta{font:600 11px 'Spline Sans Mono',monospace;color:var(--violet-ink,#6243D6);letter-spacing:.04em;text-transform:uppercase}
.ctag{display:inline-block;font:700 10.5px 'Spline Sans Mono',monospace;letter-spacing:.04em;color:var(--violet-ink,#6243D6);background:rgba(123,91,255,.1);border:1px solid var(--dawn-line,rgba(123,91,255,.18));border-radius:999px;padding:3px 9px;margin:0 6px 6px 0}

/* agrupación por categoría (ayuda) */
.help-cat{margin-top:34px}
.help-cat h2{font-family:'Sora',sans-serif;font-weight:800;font-size:22px;color:var(--dawn-ink,#15132E);margin-bottom:14px}

/* CTA al pie del contenido */
.content-cta{margin-top:48px;padding:30px 28px;border-radius:22px;border-bottom-left-radius:7px;background:linear-gradient(160deg,#0C1030,#161B45 60%,#2A1E5C);color:#fff;text-align:center}
.content-cta h3{font-family:'Sora',sans-serif;font-weight:800;font-size:24px;color:#fff;margin-bottom:8px}
.content-cta p{color:rgba(255,255,255,.78);margin-bottom:18px;font-size:15px}

@media(max-width:560px){.prose{font-size:16.5px}}

/* ============================================================
   MÓVIL — páginas de contenido (artículos / ayuda / legal). Solo @media;
   el desktop ≥1081px queda intacto.
   ============================================================ */
@media(max-width:560px){
  /* la tabla conserva display:table (grid de columnas intacto) y excede el
     wrapper; el scroll vive en .table-scroll, nunca ensancha el viewport. */
  .prose table{width:auto;min-width:100%;margin:0 0 22px}
}
@media(max-width:480px){
  .content-main{padding-left:18px;padding-right:18px}
  /* minmax(290px) desborda bajo ~290px+padding → dejar que la columna encoja */
  .cardgrid{grid-template-columns:repeat(auto-fill,minmax(0,1fr))}
  .content-cta{padding-left:20px;padding-right:20px}
  /* FAQ de las páginas de contenido: lados más justos para preguntas largas
     (top/bottom 16px del base → summary sigue ≥44px de alto) */
  .faq-item summary{padding-left:16px;padding-right:16px;gap:12px}
  .faq-item p{padding-left:16px;padding-right:16px}
}

/* ============================================================
   MÓVIL — pase 2 (teléfonos 430/390/360/320). Solo @media; el
   desktop ≥1081px queda intacto. Extiende los tiers existentes
   (560/480) y añade 380/320 que faltaban por completo. Toda regla
   que neutraliza un leak de styles.css va scopeada a body.page-content.
   ============================================================ */

/* ---- GUARDA ANTI-DESBORDE (toda la franja móvil): ni una palabra/URL/code
   larga ni la tabla empujan el viewport hacia los lados ---- */
@media(max-width:760px){
  body.page-content{overflow-x:hidden}
  .content-main{max-width:100%}
  /* romper cadenas largas (URLs en prose/fuentes, slugs en code inline) */
  .prose,.prose p,.prose li,.prose a,.sources-block a,.answer-lede,.crumbs,.crumbs a{
    overflow-wrap:anywhere;word-break:break-word}
  .prose pre{white-space:pre;overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* el título no debe desbordar con palabras largas */
  .page-title{overflow-wrap:anywhere}
  /* imágenes nunca exceden la columna (la tabla la maneja .table-scroll) */
  .prose img{max-width:100%}
}

/* ---- TABLAS de la prosa: el wrapper .table-scroll scrollea; nowrap mantiene
   las celdas legibles y obliga a la tabla a exceder el wrapper (activa el scroll) ---- */
@media(max-width:560px){
  /* lede answer-first: menos cuerpo y lados más justos */
  .answer-lede{font-size:17px;padding:14px 16px}
  /* citas y código: el borde/relleno izq. dejan de comerse la columna estrecha */
  .prose blockquote{padding-left:16px;margin:20px 0}
  .prose pre{padding:14px 16px;border-radius:12px;font-size:13.5px}
  .prose h2{font-size:24px;margin:34px 0 11px}
  .prose h3{font-size:19.5px;margin:26px 0 9px}
  /* cards del índice: relleno más ajustado */
  .ccard{padding:20px 18px 18px}
  /* CTA al pie: el botón lima a ancho cómodo, nunca desborda ni queda diminuto */
  .content-cta{padding:26px 22px}
  .content-cta h3{font-size:21px}
  .content-cta .btn--lg{width:100%;justify-content:center;padding:15px 22px}
}

/* ---- NAV en páginas de contenido: marca izq · [idioma][hamburguesa] der.
   El leak @980 de styles.css ya oculta .nav__right .btn y pone margin-left:auto;
   aquí solo evitamos que el grupo derecho quede apretado contra el borde y
   confirmamos el desplegable claro. Scopeado a body.page-content. ---- */
@media(max-width:560px){
  body.page-content .nav__inner{gap:10px}
  body.page-content .nav__right{gap:8px}
  body.page-content .lang{padding:5px 9px;gap:6px}
  /* desplegable de embudo (.nav__links abierto): hereda el fondo claro del leak
     manana; aseguramos separadores con la línea clara (no la línea noche) */
  body.page-content .nav.open .nav__links a{border-bottom-color:var(--dawn-line,rgba(123,91,255,.18))}
}

/* ---- 480: cabecera y tipografía de página más compactas ---- */
@media(max-width:480px){
  .page-head{margin-bottom:30px}
  .page-title{font-size:clamp(26px,7.4vw,34px)}
  .page-sub{font-size:16px}
  .ctag{font-size:10px;padding:3px 8px;margin:0 5px 5px 0}
}

/* ---- 380: el tier estrecho que faltaba (≈360px de columna) ---- */
@media(max-width:380px){
  .content-main{padding-left:16px;padding-right:16px}
  .page-title{font-size:clamp(23px,8vw,29px);line-height:1.14}
  .answer-lede{font-size:16px;padding:13px 14px}
  .prose blockquote{padding-left:14px}
  .prose pre{padding:13px 14px}
  .faq-item summary{padding:14px 14px;font-size:15px;gap:10px}
  .faq-item p{padding-left:14px;padding-right:14px}
  .ccard{padding:18px 16px 16px}
  .ccard h3{font-size:17px}
  .content-cta{padding:22px 18px}
  .content-cta h3{font-size:20px}
  .content-cta p{font-size:14px}
  /* nav aún más ajustada para que idioma+hamburguesa quepan sin solaparse */
  body.page-content .nav__inner{gap:8px}
  body.page-content .lang{padding:4px 8px}
  body.page-content .lang__btn{font-size:11.5px}
}

/* ---- 320: piso duro (iPhone SE / pantallas mínimas) ---- */
@media(max-width:320px){
  .page-title{font-size:21px}
  .prose{font-size:16px}
  .prose h2{font-size:22px}
  .prose h3{font-size:18.5px}
  .content-cta{padding:20px 16px}
  .content-cta h3{font-size:18.5px}
}

/* ============================================================
   MÓVIL — pase 2 (artículos/ayuda/legal en teléfono: 430/390/360/320).
   Solo @media; el desktop ≥1081px queda intacto. Extiende los tiers
   560/480 ya existentes y añade 760/640/380. Lo que neutraliza un leak
   de styles.css va scopeado a body.page-content.
   ============================================================ */

/* ---- GUARDA ANTI-DESBORDE (toda la franja móvil): ninguna palabra/URL/code
   larga ni la tabla empujan el viewport hacia los lados ---- */
@media(max-width:760px){
  body.page-content{overflow-x:hidden}
  .content-main{max-width:100%}
  .prose,.prose p,.prose li,.prose a,.sources-block a,.answer-lede,.crumbs,.crumbs a,
  .page-title,.page-meta{overflow-wrap:anywhere;word-break:break-word}
  .prose pre{white-space:pre;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
  .prose img{max-width:100%}
}

@media(max-width:560px){
  /* TABLA comparativa: el scroll vive en .table-scroll (no en la <table>).
     border/radius/gradient como afordancia de scroll en el wrapper; nowrap en
     celdas mantiene columnas legibles y hace que la tabla exceda el wrapper. */
  .table-scroll{border:1px solid var(--dawn-line,rgba(123,91,255,.18));
    border-radius:var(--r,20px);overscroll-behavior-x:contain;
    background:linear-gradient(to right,transparent calc(100% - 22px),rgba(123,91,255,.10)) right/100% 100% no-repeat local}
  .prose th,.prose td{white-space:nowrap;padding:9px 13px}
  /* lede answer-first + cita + code: menos cuerpo y lados más justos en la columna estrecha */
  .answer-lede{font-size:17px;padding:14px 16px}
  .prose blockquote{padding-left:16px;margin:20px 0}
  .prose pre{padding:14px 16px;border-radius:12px;font-size:13.5px;line-height:1.6}
  .prose code{overflow-wrap:anywhere;word-break:break-word}
  .prose h2{font-size:24px;margin:34px 0 11px}
  .prose h3{font-size:19.5px;margin:26px 0 9px}
  /* cards del índice: relleno más ajustado */
  .ccard{padding:20px 18px 18px}
  /* CTA al pie: botón lima a ancho cómodo, nunca desborda ni queda diminuto */
  .content-cta{padding:26px 22px}
  .content-cta h3{font-size:21px}
  .content-cta .btn--lg{width:100%;justify-content:center;padding:15px 22px}

  /* NAV en páginas de contenido: marca izq · [idioma][hamburguesa] der. (el leak @980
     ya oculta .nav__right .btn y pone margin-left:auto). Garantizamos targets ≥44px y
     que el grupo derecho no quede pegado al borde. Scopeado a body.page-content. */
  body.page-content .nav__inner{gap:10px}
  body.page-content .nav__right{gap:8px}
  body.page-content .lang{padding:5px 9px;gap:6px}
  body.page-content .lang__btn{min-height:40px;display:inline-flex;align-items:center}
  body.page-content .nav__toggle{min-width:44px;min-height:44px;align-items:center;justify-content:center}
  body.page-content .nav.open .nav__links a{border-bottom-color:var(--dawn-line,rgba(123,91,255,.18))}
}

/* ---- ÍNDICE: matar la banda apretada de 2 columnas (auto-fill minmax 290px
   metía 2ª columna ~646-760px). 1 sola columna hasta 640px. ---- */
@media(max-width:640px){
  .cardgrid{grid-template-columns:1fr}
}

@media(max-width:480px){
  /* La nav fija mide ~64px; el piso 110px del clamp base dejaba hueco muerto.
     Bajamos SOLO el padding superior (los lados 18px ya los fija la regla @480 existente). */
  .content-main{padding-top:clamp(86px,20vw,104px)}
  .page-title{hyphens:auto}
  .answer-lede{border-radius:0 12px 12px 0}
  .cardgrid{gap:14px;margin-top:6px}
  .help-cat{margin-top:28px}
  .help-cat h2{font-size:20px;margin-bottom:12px}
}

@media(max-width:380px){
  .content-main{padding-top:clamp(80px,22vw,96px);padding-left:16px;padding-right:16px}
  .prose ul,.prose ol{padding-left:20px}
  .prose blockquote{padding-left:16px}
  .prose h2{font-size:23px;margin-top:34px}
  .prose h3{font-size:19px;margin-top:26px}
  .prose th,.prose td{padding:8px 11px;font-size:14px}
  .answer-lede{border-left-width:3px}
  .page-meta{font-size:12px;letter-spacing:0}
  .ccard{padding:18px 16px 16px}
  .ccard p{font-size:13.5px}
}