/* Botones y tarjetas alineados con el resto del sitio: sin radio de
   píldora, sin resplandor y sin levantamiento en hover. */
/* ===========================================================================
   Estilos compartidos de artículos y recursos — Concept Co
   ---------------------------------------------------------------------------
   Se extraen a un archivo aparte porque a partir del blog hay varias páginas
   con la misma estructura (nav, hero oscuro, cuerpo de artículo, CTA, pie).
   Mantenerlo en un solo lugar evita que se desincronicen entre sí, que es lo
   que ya venía pasando con los estilos duplicados de casos.html y faq.html.
   =========================================================================== */

:root{
  --bg:#FFFFFF;--bg-soft:#F5F7FB;--ink:#0E1630;--muted:#5A6480;--muted-2:#8A93AD;
  --line:#E7EBF3;--accent:#2E6BF0;--green:#0E7A55;--cyan:#16B9C6;--amber:#B45309;--red:#C0392B;
  --radius:20px;--shadow:0 18px 44px -22px rgba(20,30,60,.32);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--bg)}
body{font-family:'Rubik',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.wrap{width:min(760px,92%);margin-inline:auto}
.wrap-ancho{width:min(1100px,92%);margin-inline:auto}

.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.98rem;
  padding:14px 28px;border-radius:4px;transition:.25s;cursor:pointer;border:0;font-family:inherit}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:#2559D6}
.btn-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.eyebrow{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:#8FB8FF;margin-bottom:12px}

/* ---------- Nav ---------- */
header.nav{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.85);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:70px;
  width:min(1100px,92%);margin-inline:auto}
.brand img{height:clamp(28px,4vw,38px);width:auto;max-width:180px;object-fit:contain}
.brand .fallback{font-weight:800;color:var(--ink);font-size:1.05rem}
.nav-right{display:flex;align-items:center;gap:16px}
.nav-right .back{color:var(--muted);font-weight:500;font-size:.95rem}
.nav-right .back:hover{color:var(--ink)}
.nav-right .btn{padding:9px 18px;font-size:.9rem}
@media(max-width:560px){.nav-right .back{display:none}}

/* ---------- Hero ---------- */
.head{padding:64px 0 52px;color:#fff;position:relative;overflow:hidden;
  background:
    radial-gradient(640px 340px at 85% -10%, rgba(46,107,240,.42), transparent 60%),
    radial-gradient(520px 320px at 0% 115%, rgba(22,185,198,.26), transparent 60%),
    linear-gradient(160deg,#0B1330,#070C1C 60%,#05091A)}
.head .wrap,.head .wrap-ancho{position:relative;z-index:1}
.head.centro .wrap,.head.centro .wrap-ancho{text-align:center}
.head h1{font-size:clamp(1.9rem,4.4vw,2.7rem);font-weight:700;letter-spacing:-.02em;line-height:1.18;max-width:26ch}
.head.centro h1{margin-inline:auto}
.head p.lead{color:#C4D0E8;margin-top:14px;font-size:1.03rem;max-width:60ch}
.head.centro p.lead{margin-inline:auto}
.head .datos{display:flex;gap:20px;flex-wrap:wrap;margin-top:20px;font-size:.85rem;color:#9FB0D0}
.head.centro .datos{justify-content:center}

section{padding:52px 0}

/* ---------- Cuerpo de artículo ---------- */
article h2{font-size:clamp(1.25rem,2.6vw,1.55rem);margin:38px 0 12px;letter-spacing:-.01em}
article h3{font-size:1.06rem;margin:26px 0 8px}
article p{margin-bottom:15px;color:#26304C}
article ul,article ol{margin:0 0 16px 22px}
article li{margin-bottom:8px;color:#26304C}
article strong{color:var(--ink)}
article a:not(.btn){color:var(--accent);text-decoration:underline;text-underline-offset:2px}

.destacado{background:var(--bg-soft);border-left:4px solid var(--accent);border-radius:0 12px 12px 0;
  padding:18px 22px;margin:26px 0}
.destacado p{margin:0;font-size:.96rem}
.destacado.alerta{border-left-color:var(--red);background:#FDF4F3}
.destacado.ok{border-left-color:var(--green);background:#F1F8F5}

.tabla{width:100%;border-collapse:collapse;margin:22px 0;font-size:.92rem}
.tabla th{background:var(--accent);color:#fff;text-align:left;padding:10px 14px;font-weight:600;font-size:.85rem}
.tabla td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.tabla tr:nth-child(even) td{background:var(--bg-soft)}

.checklist{list-style:none;margin-left:0}
.checklist li{position:relative;padding-left:30px;margin-bottom:10px}
.checklist li::before{content:"";position:absolute;left:0;top:7px;width:16px;height:16px;
  border-radius:4px;border:2px solid var(--accent)}

/* ---------- Tarjetas (hub de recursos) ---------- */
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:26px}
.tarjeta{border:1px solid var(--line);border-radius:6px;padding:24px;background:#fff;
  display:flex;flex-direction:column;transition:.25s}
.tarjeta:hover{box-shadow:var(--shadow);border-color:#C9DAFB}
/* La etiqueta baja al pie y pierde el fondo de color: arriba formaba el trío
   “etiqueta → título → descripción”, que es el patrón que delata la plantilla.
   .tarjeta es flex en columna, así que `order` la reubica sin tocar el HTML de
   las siete páginas que usan esta hoja. */
.tarjeta .etiqueta{order:9;align-self:flex-start;display:inline-block;
  margin:14px 0 0;padding:0;background:none;border-radius:0;
  font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.et-herramienta{color:var(--accent)}
.et-articulo{color:var(--green)}
.et-guia{color:var(--amber)}
.tarjeta h3{font-size:1.08rem;margin-bottom:8px;line-height:1.35}
/* :not(.meta-min) es la clave. .meta-min también es un <p>, así que con la
   regla anterior recibía flex:1 y absorbía el espacio libre de la tarjeta,
   empujando el título hacia abajo una distancia distinta en cada una. De ahí
   que los títulos quedaran escalonados. Solo la descripción debe crecer: es
   lo que mantiene el enlace y la etiqueta alineados al pie. */
.tarjeta p:not(.meta-min){color:var(--muted);font-size:.92rem;flex:1;margin-bottom:16px}
.tarjeta .meta-min{flex:0 0 auto}
.tarjeta .enlace{color:var(--accent);font-weight:600;font-size:.92rem}
.tarjeta .meta-min{font-size:.78rem;color:var(--muted-2);margin-bottom:10px}

.titulo-seccion{display:flex;align-items:baseline;gap:14px;margin-bottom:6px;flex-wrap:wrap}
.titulo-seccion h2{font-size:1.45rem;letter-spacing:-.01em}
.titulo-seccion span{color:var(--muted-2);font-size:.86rem}
.sub-seccion{color:var(--muted);margin-bottom:4px}

/* ---------- CTA y pie ---------- */
.cta{background:var(--bg-soft);border-top:1px solid var(--line);text-align:center}
.cta h2{font-size:clamp(1.4rem,3vw,2rem);margin-bottom:10px}
.cta p{color:var(--muted);max-width:58ch;margin:0 auto 22px}
.cta .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

footer{background:#0B1330;color:#C9CFE0;padding:40px 0}
footer .wrap-ancho{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.9rem}
footer a{color:#fff}

/* ---------- Navegación entre artículos ---------- */
.sig{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:44px;
  padding-top:24px;border-top:1px solid var(--line)}
.sig a{font-size:.92rem;color:var(--accent);font-weight:600}