/* Páginas de contenido (portada, guía, dominios, tips). Se apoya en las variables de style.css. */
.page { max-width: 900px; margin: 0 auto; padding: 0 16px; }
main.page { padding-block: 20px 56px; }
main.page h1 { font-size: 30px; line-height: 1.2; margin: 12px 0 8px; }
main.page h2 { font-size: 22px; margin: 34px 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
main.page h3, .page section h3 { font-size: 17px; margin: 20px 0 6px; }
main p, main li { line-height: 1.65; }
main ul, main ol { padding-left: 22px; }
.lead { font-size: 18px; color: var(--muted); max-width: 760px; }
a.brand { text-decoration: none; }
a.nbtn { text-decoration: none; display: inline-block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* botones de llamada a la acción */
.cta-btn { display: inline-block; text-decoration: none; font-weight: 700; padding: 8px 20px; border-radius: 20px; border: 1px solid var(--accent); background: var(--accent); color: #16191f; white-space: nowrap; }
.cta-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.cta-btn.big { padding: 12px 28px; font-size: 17px; }
.cta-btn.ghost { background: transparent; color: #fff; border-color: #fff; }
.cta-btn.ghost:hover { background: rgba(255,255,255,.14); }
main.page .cta-btn.ghost { color: var(--link); border-color: var(--link); }
main.page .cta-btn.ghost:hover { background: var(--opt-hover); }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 18px 0; }

/* portada */
.hero { background: linear-gradient(135deg, #232f3e 0%, #37475a 100%); color: #fff; padding: 44px 0 40px; border-bottom: 4px solid var(--accent); }
.hero h1 { font-size: 36px; line-height: 1.15; margin: 6px 0 14px; }
.hero .lead { color: #d5dbdb; font-size: 19px; }
.hero .eyebrow { margin: 0; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; }
.hero .hint { color: #aab7b8; font-size: 14px; margin: 4px 0 0; }
.page section h2 { font-size: 24px; margin: 38px 0 12px; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 12px 0; }
.fact { background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 8px; padding: 14px 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.fact b { font-size: 34px; line-height: 1.1; }
.fact .u { font-weight: 700; }
.fact .d { font-size: 13px; color: var(--muted); margin-top: 4px; }
.domgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; margin: 14px 0; }
.domcard { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; box-shadow: var(--shadow); position: relative; }
.domcard:hover { border-color: var(--accent); }
.domcard .w { position: absolute; top: 12px; right: 14px; font-weight: 800; color: var(--accent-hover); }
.domcard b { font-size: 16px; }
.featgrid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.featgrid li { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; box-shadow: var(--shadow); }
.featgrid h3 { margin: 0 0 6px; font-size: 16px; }
.featgrid p { margin: 0; color: var(--muted); font-size: 14px; }

/* tablas, índices, migas */
.tablewrap { overflow-x: auto; margin: 14px 0; }
table { border-collapse: collapse; width: 100%; background: var(--card); border: 1px solid var(--line); }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); }
th { background: var(--opt); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
td.num { font-weight: 700; white-space: nowrap; }
.toc { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 8px; padding: 12px 18px; margin: 18px 0; }
.toc ol { margin: 6px 0 0; columns: 2; column-gap: 28px; }
@media (max-width: 560px) { .toc ol { columns: 1; } .hero h1 { font-size: 28px; } main.page h1 { font-size: 26px; } }
.crumbs { font-size: 13px; color: var(--muted); }
.crumbs a { color: var(--link); }
.chiplist { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chiplist li { padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--opt); font-size: 14px; }

/* FAQ y tips */
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px; }
.faq summary { cursor: pointer; font-weight: 700; padding: 12px 16px; }
.faq details[open] summary { border-bottom: 1px solid var(--line); }
.faq details p { margin: 0; padding: 12px 16px; }
.tip { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 8px; padding: 4px 18px 8px; margin: 12px 0; box-shadow: var(--shadow); }
.tip h3 { margin: 12px 0 6px; }
.tip p { margin: 6px 0; }
.tip .muted { font-size: 13px; overflow-wrap: anywhere; }
.cta-box { background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: 8px; padding: 6px 20px 8px; margin: 34px 0 10px; box-shadow: var(--shadow); }
.cta-box h2 { border: 0; margin: 14px 0 4px; }
.prevnext { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

/* pie de página */
.sitefoot { max-width: 900px; margin: 0 auto; padding: 24px 16px 40px; color: var(--muted); font-size: 13px; }
.sitefoot-big { max-width: none; background: var(--nav); color: #aab7b8; padding: 30px 16px 40px; border-top: 4px solid var(--accent); }
.sitefoot-big > * { max-width: 900px; margin-inline: auto; }
.sitefoot-big a { color: #fff; }
.foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; margin-bottom: 18px; }
.foot-cols h2 { font-size: 14px; color: var(--accent); margin: 0 0 8px; padding: 0; border: 0; text-transform: uppercase; letter-spacing: .06em; }
.foot-cols ul { list-style: none; padding: 0; margin: 0; }
.foot-cols li { margin: 4px 0; line-height: 1.4; }

/* ---- topic hub, compact tip lists, tables with row headers ---- */
ul.compact { list-style: none; padding: 0; display: grid; gap: 8px; }
ul.compact li { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 8px; padding: 10px 14px; }
.topiccard { background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: 8px; padding: 4px 18px 14px; margin: 16px 0; box-shadow: var(--shadow); }
.topiccard h2 { border: 0; margin: 14px 0 6px; padding: 0; }
.topiccard h2 a { text-decoration: none; }
.topiccard p { margin: 4px 0; }
th[scope="row"] { background: var(--opt); text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink); white-space: nowrap; vertical-align: top; }
td ul { margin: 0; padding-left: 18px; }
td { vertical-align: top; }
@media (max-width: 560px) { th[scope="row"] { white-space: normal; } }
.featgrid h3 a { text-decoration: none; }