/* ============================================================
   ARX · Estilos compartidos para páginas de contenido
   FAQ y artículos (SEO + GEO) · v1 Junio 2026
   Subir este archivo a:  /assets/arx-pages.css  (raíz del sitio)
   ============================================================ */

:root{
  --navy:#12126e;
  --blue:#3a6bbf;
  --teal:#4db8a0;
  --grad:linear-gradient(135deg,#12126e 0%,#3a6bbf 60%,#4db8a0 100%);
  --ink:#1b1d2a;        /* texto principal */
  --muted:#5a6072;      /* texto secundario */
  --line:#e6eaf2;       /* bordes suaves */
  --soft:#f4f7fc;       /* fondos suaves */
  --maxw:720px;         /* ancho de lectura */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:Georgia,"Times New Roman",serif;   /* cuerpo editorial, sin dependencias */
  font-size:19px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
.sans{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}

a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- Barra superior ---------- */
.topbar{
  border-bottom:1px solid var(--line);
  background:#fff;
}
.topbar .wrap{
  max-width:var(--maxw);margin:0 auto;padding:18px 22px;
  display:flex;align-items:center;justify-content:space-between;
}
.brand{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-weight:800;letter-spacing:3px;font-size:20px;color:var(--navy);
}
.brand:hover{text-decoration:none}
.topnav a{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14px;color:var(--muted);margin-left:18px;
}

/* ---------- Contenedor ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
main{padding:34px 0 10px}

/* ---------- Migas ---------- */
.breadcrumb{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:13px;color:var(--muted);margin:0 0 26px;
}
.breadcrumb a{color:var(--muted)}
.breadcrumb span{margin:0 7px;opacity:.5}

/* ---------- Cabecera de página ---------- */
.page-head{margin:0 0 30px}
.eyebrow{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:12.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--teal);margin:0 0 10px;
}
h1{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:38px;line-height:1.18;font-weight:800;color:var(--navy);
  margin:0 0 14px;letter-spacing:-.01em;
}
.page-head .lede{font-size:20px;color:var(--muted);margin:0 0 18px}
/* firma visual: filete con gradiente bajo el título */
.rule{height:3px;width:84px;background:var(--grad);border-radius:2px;margin:0 0 4px}

/* ---------- Metadatos de autor (artículos) ---------- */
.meta{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14px;color:var(--muted);margin:18px 0 0;
  display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;
}
.meta strong{color:var(--ink)}

/* ---------- Cuerpo de contenido ---------- */
.content h2{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:25px;font-weight:800;color:var(--navy);
  margin:42px 0 12px;line-height:1.25;
}
.content h3{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:20px;font-weight:700;color:var(--ink);margin:28px 0 8px;
}
.content p{margin:0 0 18px}
.content ul,.content ol{margin:0 0 18px;padding-left:24px}
.content li{margin:0 0 8px}
.content strong{color:var(--navy)}

/* TL;DR / respuesta directa arriba */
.tldr{
  background:var(--soft);
  border-left:4px solid var(--teal);
  border-radius:0 12px 12px 0;
  padding:18px 22px;margin:0 0 30px;
  font-size:18px;
}
.tldr p{margin:0}
.tldr .label{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  display:block;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--teal);margin-bottom:6px;
}

/* Fórmulas / datos destacados */
.formula{
  font-family:"SFMono-Regular",Menlo,Consolas,monospace;
  background:#0f1230;color:#e7ecff;border-radius:10px;
  padding:16px 20px;margin:0 0 22px;font-size:15.5px;line-height:1.6;overflow-x:auto;
}

/* Tablas */
.content table{
  width:100%;border-collapse:collapse;margin:0 0 24px;font-size:16px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.content th,.content td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.content th{background:var(--soft);color:var(--navy);font-weight:700}

/* Cita */
blockquote{
  margin:0 0 24px;padding:4px 0 4px 20px;border-left:3px solid var(--blue);
  color:var(--muted);font-style:italic;
}

/* ---------- FAQ (acordeón nativo) ---------- */
.faq{margin:8px 0 0}
.faq details{
  border-bottom:1px solid var(--line);
}
.faq summary{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:19px;font-weight:700;color:var(--navy);
  list-style:none;cursor:pointer;padding:20px 36px 20px 0;position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:4px;top:18px;
  font-size:26px;font-weight:400;color:var(--teal);transition:transform .2s ease;
}
.faq details[open] summary::after{content:"\2013"}/* guion */
.faq .ans{padding:0 0 22px;color:var(--ink)}
.faq .ans p{margin:0 0 12px}
.faq .ans p:last-child{margin:0}

/* ---------- Bloque CTA ---------- */
.cta{
  background:var(--grad);border-radius:16px;color:#fff;
  padding:34px 30px;margin:46px 0 10px;text-align:center;
}
.cta h2{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:#fff;font-size:24px;margin:0 0 10px;font-weight:800;
}
.cta p{color:rgba(255,255,255,.88);margin:0 0 20px;font-size:17px}
.btn{
  display:inline-block;background:#fff;color:var(--navy);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-weight:700;font-size:16px;padding:13px 30px;border-radius:10px;
}
.btn:hover{text-decoration:none;opacity:.92}

/* ---------- Pie ---------- */
footer{
  border-top:1px solid var(--line);margin-top:40px;background:var(--soft);
}
footer .wrap{padding:26px 22px}
footer p{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14px;color:var(--muted);margin:0 0 6px;
}
footer .name{color:var(--navy);font-weight:700}

/* ---------- Accesibilidad / responsive ---------- */
a:focus-visible,summary:focus-visible,.btn:focus-visible{
  outline:3px solid var(--blue);outline-offset:2px;border-radius:4px;
}
@media (max-width:560px){
  body{font-size:18px}
  h1{font-size:30px}
  .content h2{font-size:22px}
  .page-head .lede{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}