/* ==========================================================================
   Blog Plannam Micros — hoja de estilos única
   FOX Analytics · 2026

   Los colores están tomados directamente de la plataforma Micros:
     azul de acción   #3F82F7
     fondo de página  #F6F7FA
     titulares        #0D1731
     chips pastel     azul / verde / morado / ámbar
   Todo vive en variables CSS. Para reteñir el blog entero, toca :root.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Azules de marca */
  --brand:        #3F82F7;  /* azul de la plataforma: chips, acentos, iconos  */
  --brand-btn:    #2F6BE0;  /* fondo de botón (4,88:1 con blanco = WCAG AA)   */
  --brand-btn-h:  #2559C4;  /* botón en hover                                 */
  --brand-ink:    #1F5FD1;  /* enlaces sobre fondo claro (5,81:1 = WCAG AA)   */
  --brand-50:     #F0F5FF;
  --brand-100:    #E3EDFE;
  --brand-200:    #C9DEFD;

  /* Neutros */
  --ink-900: #0D1731;  /* titulares — el navy del dashboard */
  --ink-700: #303C55;  /* párrafos          */
  --ink-500: #5C6880;  /* texto secundario  */
  --ink-400: #69737F;  /* metadatos (4,8:1) */
  --line:    #EAEDF3;
  --line-2:  #DDE2EC;
  --surface: #FFFFFF;
  --canvas:  #F6F7FA;  /* fondo exacto de la plataforma */

  /* Acentos pastel — el mismo sistema de chips del dashboard */
  --c-blue:   #3F82F7;  --c-blue-bg:   #E8F0FE;
  --c-green:  #25742C;  --c-green-bg:  #E6F6E7;
  --c-purple: #6B45D8;  --c-purple-bg: #F0ECFD;
  --c-amber:  #8F5D06;  --c-amber-bg:  #FDF2DF;

  /* Tipografía — la plataforma usa una geométrica de palo seco */
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
          Roboto, 'Helvetica Neue', Arial, sans-serif;

  --fs-xs:  0.8125rem;
  --fs-sm:  0.9375rem;
  --fs-md:  1.0625rem;
  --fs-lg:  clamp(1.09rem, 0.5vw + 1rem, 1.25rem);
  --fs-h3:  clamp(1.2rem, 0.8vw + 1rem, 1.45rem);
  --fs-h2:  clamp(1.5rem, 1.4vw + 1.1rem, 2rem);
  --fs-h1:  clamp(2.1rem, 3.2vw + 1.1rem, 3.4rem);

  /* Espaciado */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem;  --sp-7:3rem;   --sp-8:4rem; --sp-9:5.5rem;

  /* Formas — radios generosos, como el dashboard */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 28px;

  /* Sombras — muy suaves, casi imperceptibles */
  --sh-sm: 0 1px 2px rgba(13,23,49,.05);
  --sh:    0 2px 10px rgba(13,23,49,.055);
  --sh-md: 0 8px 26px rgba(13,23,49,.08);
  --sh-lg: 0 20px 52px rgba(13,23,49,.11);

  /* Layout */
  --wrap: 1180px;
  --read: 720px;
  --header-h: 72px;

  /* Movimiento */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .45s;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*,*::before,*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: 1.72;
  color: var(--ink-700);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,svg,video { max-width:100%; height:auto; display:block; }
a { color: var(--brand-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

h1,h2,h3,h4 {
  color: var(--ink-900);
  line-height: 1.18;
  letter-spacing: -.025em;
  margin: 0 0 var(--sp-4);
  font-weight: 800;
}
h1 { font-size: var(--fs-h1); letter-spacing: -.035em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p  { margin: 0 0 var(--sp-4); }

:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 6px; }

.wrap { width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--sp-5); }

.skip-link {
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--brand-btn); color:#fff;
  padding:var(--sp-3) var(--sp-5); border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus { left:0; }

.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* --------------------------------------------------------------------------
   3. ANIMACIONES
   Sutiles y cortas. Todo se desactiva si el sistema pide menos movimiento.
   -------------------------------------------------------------------------- */
@keyframes riseIn  { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
@keyframes fadeIn  { from { opacity:0; } to { opacity:1; } }
@keyframes shimmer { from { background-position:-160% 0; } to { background-position:260% 0; } }

/* Entrada al hacer scroll — el JS añade .is-in cuando el bloque entra en pantalla */
.reveal { opacity:0; transform:translateY(20px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in { opacity:1; transform:none; }
.reveal.d1 { transition-delay:.06s } .reveal.d2 { transition-delay:.12s }
.reveal.d3 { transition-delay:.18s } .reveal.d4 { transition-delay:.24s }

/* Entrada inmediata del hero, sin esperar al scroll */
.anim-rise  { animation: riseIn .7s var(--ease) both; }
.anim-rise.d1 { animation-delay:.08s } .anim-rise.d2 { animation-delay:.16s }
.anim-rise.d3 { animation-delay:.24s } .anim-rise.d4 { animation-delay:.32s }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none !important; transition:none !important; }
  .reveal { opacity:1 !important; transform:none !important; }
}

/* --------------------------------------------------------------------------
   4. CABECERA
   -------------------------------------------------------------------------- */
.site-header {
  position:sticky; top:0; z-index:100; height:var(--header-h);
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-stuck { border-bottom-color:var(--line); box-shadow:var(--sh-sm); }
.site-header__inner { height:100%; display:flex; align-items:center; gap:var(--sp-5); }
.site-header__logo { display:flex; align-items:center; flex-shrink:0; }
.site-header__logo:hover { text-decoration:none; }
.site-header__logo img { height:34px; width:auto; transition:transform .3s var(--ease); }
.site-header__logo:hover img { transform:scale(1.04); }

.site-nav { margin-left:auto; display:flex; align-items:center; gap:var(--sp-6); }
/* El :not(.btn) es necesario: sin él esta regla le gana en especificidad al
   color de .btn--primary y el texto del botón sale oscuro sobre el azul. */
.site-nav a:not(.btn) { color:var(--ink-700); font-size:var(--fs-sm); font-weight:600; position:relative; }
.site-nav a:not(.btn)::after {
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:var(--brand); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.site-nav a:not(.btn):hover { color:var(--ink-900); text-decoration:none; }
.site-nav a:not(.btn):hover::after,
.site-nav a[aria-current="page"]::after { transform:scaleX(1); }
.site-nav a[aria-current="page"] { color:var(--brand-ink); }

@media (max-width:880px) { .site-nav .nav-hide-mobile { display:none; } .site-nav { gap:var(--sp-4); } }

/* --------------------------------------------------------------------------
   5. BOTONES
   -------------------------------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  padding:.78rem 1.5rem;
  font-family:inherit; font-size:var(--fs-sm); font-weight:700; letter-spacing:-.01em;
  border-radius:999px; border:1px solid transparent; cursor:pointer;
  white-space:nowrap; text-decoration:none;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.btn:hover { text-decoration:none; transform:translateY(-2px); }
.btn:active { transform:translateY(0); }

.btn--primary { background:var(--brand-btn); color:#fff; box-shadow:0 4px 14px rgba(47,107,224,.30); }
.btn--primary:hover { background:var(--brand-btn-h); box-shadow:0 8px 22px rgba(47,107,224,.38); }

.btn--light { background:#fff; color:var(--brand-ink); box-shadow:0 4px 14px rgba(13,23,49,.16); }
.btn--light:hover { background:var(--brand-50); }

.btn--ghost { background:#fff; color:var(--ink-900); border-color:var(--line-2); box-shadow:var(--sh-sm); }
.btn--ghost:hover { border-color:var(--brand); color:var(--brand-ink); }

.btn--sm { padding:.56rem 1.15rem; font-size:var(--fs-xs); }
.btn--block { width:100%; }
.btn svg { width:16px; height:16px; transition:transform .25s var(--ease); }
.btn:hover svg { transform:translateX(3px); }

/* --------------------------------------------------------------------------
   6. ETIQUETAS Y CHIPS PASTEL
   Mismo lenguaje de color que los iconos del dashboard.
   -------------------------------------------------------------------------- */
.eyebrow {
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:var(--fs-xs); font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--brand-ink);
}
.eyebrow svg { width:14px; height:14px; }

.badge {
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.75rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:.34rem .75rem; border-radius:999px; white-space:nowrap;
}
.badge--comparativas { background:var(--c-blue-bg);   color:#1F5FD1; }
.badge--rankings     { background:var(--c-purple-bg); color:var(--c-purple); }
.badge--guias        { background:var(--c-green-bg);  color:var(--c-green); }
.badge--normativa    { background:var(--c-amber-bg);  color:var(--c-amber); }

/* Cuadradito con icono, como los de las tarjetas de métricas */
.icon-tile {
  width:44px; height:44px; border-radius:13px;
  display:grid; place-items:center; flex-shrink:0;
}
.icon-tile svg { width:21px; height:21px; }
.icon-tile--blue   { background:var(--c-blue-bg);   color:var(--c-blue); }
.icon-tile--green  { background:var(--c-green-bg);  color:var(--c-green); }
.icon-tile--purple { background:var(--c-purple-bg); color:var(--c-purple); }
.icon-tile--amber  { background:var(--c-amber-bg);  color:var(--c-amber); }

/* --------------------------------------------------------------------------
   7. HERO DEL BLOG
   -------------------------------------------------------------------------- */
.blog-hero {
  position:relative; overflow:hidden;
  background:
    radial-gradient(760px 380px at 8% -20%, #E8F0FE 0%, transparent 60%),
    radial-gradient(620px 340px at 96% -10%, #F0ECFD 0%, transparent 58%),
    var(--surface);
  padding:var(--sp-8) 0 var(--sp-7);
}
.blog-hero__grid { display:grid; grid-template-columns:1.15fr .85fr; gap:var(--sp-7); align-items:center; }
.blog-hero h1 { max-width:14ch; margin:var(--sp-4) 0; }
.blog-hero__lead { font-size:var(--fs-lg); color:var(--ink-500); max-width:52ch; margin:0 0 var(--sp-5); }
.blog-hero__art { position:relative; }
.blog-hero__art img { width:100%; border-radius:var(--r-lg); }
@media (max-width:900px) {
  .blog-hero__grid { grid-template-columns:1fr; gap:var(--sp-5); }
  .blog-hero__art { display:none; }
  .blog-hero h1 { max-width:none; }
}

/* --- Montaje de fotos del hero ------------------------------------------
   Tres fotos de sectores distintos, apiladas y giradas. Al pasar el ratón
   se separan un poco. Dice de un vistazo que el blog no va de un solo nicho.
   ------------------------------------------------------------------------ */
.hero-stack { position:relative; aspect-ratio:1/.92; }

.hero-stack::before {
  content:''; position:absolute; inset:12% 4% -4% 4%;
  background:radial-gradient(58% 58% at 50% 50%, rgba(63,130,247,.26), transparent 72%);
  filter:blur(40px); pointer-events:none;
}

.hero-stack figure {
  position:absolute; margin:0; overflow:hidden;
  background:#fff; padding:8px; border-radius:18px;
  box-shadow:0 22px 46px -16px rgba(13,23,49,.30), 0 4px 12px rgba(13,23,49,.09);
  transition:transform .55s var(--ease), box-shadow .55s var(--ease);
}
.hero-stack figure img { width:100%; height:100%; object-fit:cover; border-radius:11px; display:block; }

.hero-stack__tag {
  position:absolute; left:18px; bottom:18px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:var(--ink-900); font-size:.72rem; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase;
  padding:.32rem .7rem; border-radius:999px;
  box-shadow:0 2px 8px rgba(13,23,49,.14);
}

/* Foto grande, al fondo */
.hero-stack .s1 { width:70%; aspect-ratio:4/3; top:2%;  left:0;    transform:rotate(-3deg); z-index:1; }
/* Foto media, arriba a la derecha */
.hero-stack .s2 { width:52%; aspect-ratio:4/3; top:22%; right:0;   transform:rotate(4deg);  z-index:3; }
/* Foto pequeña, abajo a la izquierda */
.hero-stack .s3 { width:46%; aspect-ratio:4/3; bottom:0; left:14%; transform:rotate(-6deg); z-index:2; }

.hero-stack:hover .s1 { transform:rotate(-5deg) translate(-10px,-8px); box-shadow:0 30px 56px -16px rgba(13,23,49,.34); }
.hero-stack:hover .s2 { transform:rotate(6.5deg) translate(12px,-10px); box-shadow:0 30px 56px -16px rgba(13,23,49,.34); }
.hero-stack:hover .s3 { transform:rotate(-8deg) translate(-6px,12px);  box-shadow:0 30px 56px -16px rgba(13,23,49,.34); }

@media (max-width:900px) { .hero-stack { display:none; } }
@media (prefers-reduced-motion: reduce) {
  .hero-stack:hover figure { transform:none; }
  .hero-stack .s1 { transform:rotate(-3deg); }
  .hero-stack .s2 { transform:rotate(4deg); }
  .hero-stack .s3 { transform:rotate(-6deg); }
}

/* --- Mockup de la plataforma -------------------------------------------
   Ventana de la app con perspectiva. Al pasar el ratón por encima se
   endereza y sigue al cursor con un giro muy corto. El JS solo escribe
   dos variables (--ry y --rx); el resto lo hace el CSS.
   ------------------------------------------------------------------------ */
.mockup { position:relative; perspective:1500px; }

/* Resplandor azul difuso por detrás */
.mockup::before {
  content:''; position:absolute; inset:14% 6% -8% 6%;
  background:radial-gradient(60% 60% at 50% 50%, rgba(63,130,247,.32), transparent 72%);
  filter:blur(38px); z-index:0; pointer-events:none;
}

.mockup__frame {
  --ry: -10; --rx: 4.5;
  position:relative; z-index:1;
  border-radius:16px; overflow:hidden; background:#fff;
  border:1px solid rgba(13,23,49,.09);
  box-shadow:
    0 46px 90px -26px rgba(13,23,49,.34),
    0 16px 34px -14px rgba(13,23,49,.18),
    0 2px 5px rgba(13,23,49,.06);
  transform:
    rotateY(calc(var(--ry) * 1deg))
    rotateX(calc(var(--rx) * 1deg))
    rotate(.3deg);
  transform-style:preserve-3d;
  transition:transform .8s var(--ease), box-shadow .8s var(--ease);
  will-change:transform;
}
.mockup:hover .mockup__frame {
  box-shadow:
    0 60px 110px -28px rgba(13,23,49,.38),
    0 20px 40px -14px rgba(13,23,49,.2),
    0 2px 5px rgba(13,23,49,.06);
}
/* Mientras el ratón está encima el giro responde al instante */
.mockup.is-live .mockup__frame { transition:transform .18s ease-out, box-shadow .8s var(--ease); }

/* Barra superior de ventana */
.mockup__bar {
  display:flex; align-items:center; gap:6px;
  height:30px; padding:0 13px;
  background:linear-gradient(#FDFDFE,#F4F6FA);
  border-bottom:1px solid var(--line);
}
.mockup__bar i { width:9px; height:9px; border-radius:50%; display:block; }
.mockup__bar i:nth-child(1) { background:#F2635A; }
.mockup__bar i:nth-child(2) { background:#F5BD4F; }
.mockup__bar i:nth-child(3) { background:#61C454; }
.mockup__bar span {
  margin-left:auto; margin-right:auto;
  font-size:11px; color:var(--ink-400); font-weight:600;
  letter-spacing:.01em; transform:translateX(-14px);
}
.mockup__frame img { width:100%; display:block; }

/* Brillo diagonal que da sensación de cristal */
.mockup__frame::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 42%);
  opacity:.9;
}

@media (max-width:900px) { .mockup::before { display:none; } }
@media (prefers-reduced-motion: reduce) {
  .mockup__frame { --ry:0; --rx:0; }
}

/* Sellos de confianza bajo el hero */
.hero-marks { display:flex; gap:var(--sp-5); flex-wrap:wrap; font-size:var(--fs-xs); color:var(--ink-500); }
.hero-marks span { display:inline-flex; align-items:center; gap:.4rem; }
.hero-marks svg { width:15px; height:15px; color:var(--c-green); }

/* --------------------------------------------------------------------------
   8. FILTROS
   -------------------------------------------------------------------------- */
.filters {
  position:sticky; top:var(--header-h); z-index:50;
  background:rgba(246,247,250,.96);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-block:1px solid var(--line);
  padding:var(--sp-3) 0;
}
.filters__inner { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.filters__list { display:flex; gap:var(--sp-2); flex-wrap:wrap; }

.chip {
  font-family:inherit; font-size:var(--fs-sm); font-weight:600;
  color:var(--ink-500); background:#fff;
  border:1px solid var(--line-2); border-radius:999px;
  padding:.46rem 1.05rem; cursor:pointer;
  transition:all .22s var(--ease);
}
.chip:hover { border-color:var(--brand); color:var(--brand-ink); transform:translateY(-1px); }
.chip[aria-pressed="true"] {
  background:var(--ink-900); border-color:var(--ink-900); color:#fff;
  box-shadow:0 4px 12px rgba(13,23,49,.18);
}
.chip__count { opacity:.5; margin-left:.35rem; font-variant-numeric:tabular-nums; }

/* Desplegable de sector: segundo eje de filtrado, sin peso visual */
.filters__sector { margin-left:auto; position:relative; }
.filters__sector select {
  appearance:none; -webkit-appearance:none;
  font-family:inherit; font-size:var(--fs-sm); font-weight:600;
  color:var(--ink-500); background:#fff;
  border:1px solid var(--line-2); border-radius:999px;
  padding:.46rem 2.3rem .46rem 1.05rem; cursor:pointer;
  transition:all .22s var(--ease);
}
.filters__sector select:hover { border-color:var(--brand); color:var(--brand-ink); }
.filters__sector select:focus-visible { border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-100); }
.filters__sector select.is-set {
  background:var(--ink-900); border-color:var(--ink-900); color:#fff;
  box-shadow:0 4px 12px rgba(13,23,49,.18);
}
.filters__sector select option { color:var(--ink-900); }
.filters__sector select option:disabled { color:var(--ink-400); }
.filters__sector svg {
  position:absolute; right:.9rem; top:50%; transform:translateY(-50%);
  width:14px; height:14px; color:var(--ink-400); pointer-events:none;
  transition:color .22s var(--ease);
}
.filters__sector select.is-set ~ svg { color:#fff; }

.filters__search { position:relative; }
.filters__search input {
  font-family:inherit; font-size:var(--fs-sm);
  padding:.52rem .95rem .52rem 2.3rem; width:230px;
  border:1px solid var(--line-2); border-radius:999px;
  background:#fff; color:var(--ink-900);
  transition:border-color .22s var(--ease), box-shadow .22s var(--ease), width .3s var(--ease);
}
.filters__search input:focus { border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-100); width:260px; }
.filters__search svg {
  position:absolute; left:.85rem; top:50%; transform:translateY(-50%);
  width:15px; height:15px; color:var(--ink-400); pointer-events:none;
}
@media (max-width:720px) {
  .filters__sector { margin-left:0; flex:1 1 auto; }
  .filters__sector select { width:100%; }
  .filters__search { flex:1 1 100%; }
  .filters__search input, .filters__search input:focus { width:100%; }
  .filters__list { overflow-x:auto; flex-wrap:nowrap; padding-bottom:2px; scrollbar-width:none; }
  .filters__list::-webkit-scrollbar { display:none; }
}

/* --------------------------------------------------------------------------
   9. SECCIONES Y TARJETAS
   -------------------------------------------------------------------------- */
.section { padding:var(--sp-7) 0; }
.section--canvas { background:var(--canvas); }
.section__head { display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-4); margin-bottom:var(--sp-5); flex-wrap:wrap; }
.section__head h2 { margin:0; font-size:var(--fs-h3); }
.section__head p  { margin:0; color:var(--ink-500); font-size:var(--fs-sm); }

.grid { display:grid; gap:var(--sp-5); grid-template-columns:repeat(auto-fill, minmax(310px,1fr)); }

.card {
  position:relative; display:flex; flex-direction:column; height:100%;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--sh-sm);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover { transform:translateY(-5px); box-shadow:var(--sh-md); border-color:var(--line-2); }
.card:focus-within { box-shadow:var(--sh-md); border-color:var(--brand); }

.card__media { aspect-ratio:16/10; overflow:hidden; background:var(--brand-50); border-bottom:1px solid var(--line); }
.card__media img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.card:hover .card__media img { transform:scale(1.035); }

.card__body { padding:var(--sp-5); display:flex; flex-direction:column; flex:1; gap:var(--sp-3); }
.card__title { font-size:1.13rem; line-height:1.34; margin:0; font-weight:800; }
.card__title a { color:var(--ink-900); transition:color .2s var(--ease); }
.card__title a:hover { color:var(--brand-ink); text-decoration:none; }
.card__title a::after { content:''; position:absolute; inset:0; }

.card__excerpt {
  font-size:var(--fs-sm); color:var(--ink-500); margin:0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.card__meta {
  margin-top:auto; padding-top:var(--sp-3);
  display:flex; align-items:center; gap:var(--sp-3);
  font-size:var(--fs-xs); color:var(--ink-400);
  border-top:1px solid var(--line);
}
.card__meta .dot { width:3px; height:3px; border-radius:50%; background:currentColor; flex-shrink:0; }

/* --- Destacado --- */
.featured {
  position:relative; display:grid; grid-template-columns:1.05fr 1fr;
  border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden;
  background:var(--surface); box-shadow:var(--sh);
  transition:box-shadow .35s var(--ease), transform .35s var(--ease);
}
.featured:hover { box-shadow:var(--sh-lg); transform:translateY(-3px); }
.featured__media { overflow:hidden; background:var(--brand-50); }
.featured__media img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.featured:hover .featured__media img { transform:scale(1.03); }
.featured__body { padding:var(--sp-7) var(--sp-6); display:flex; flex-direction:column; gap:var(--sp-4); justify-content:center; }
.featured__body h3 { font-size:clamp(1.35rem,1.7vw + .95rem,1.95rem); margin:0; line-height:1.2; font-weight:800; }
.featured__body h3 a { color:var(--ink-900); }
.featured__body h3 a::after { content:''; position:absolute; inset:0; }
.featured__body h3 a:hover { color:var(--brand-ink); text-decoration:none; }
.featured__body p { margin:0; color:var(--ink-500); }
@media (max-width:880px) {
  .featured { grid-template-columns:1fr; }
  .featured__media { aspect-ratio:16/9; }
  .featured__body { padding:var(--sp-5); }
}

.empty-state {
  grid-column:1/-1; text-align:center; padding:var(--sp-8) var(--sp-5);
  color:var(--ink-500); border:1px dashed var(--line-2); border-radius:var(--r);
  background:var(--surface);
}

/* --------------------------------------------------------------------------
   10. LLAMADAS A LA ACCIÓN
   -------------------------------------------------------------------------- */
.cta-band {
  position:relative; overflow:hidden;
  background:linear-gradient(125deg,#0D1731 0%,#16305E 52%,#2559C4 100%);
  color:#fff; border-radius:var(--r-xl); padding:var(--sp-7) var(--sp-6);
  display:grid; grid-template-columns:1.5fr auto; gap:var(--sp-6); align-items:center;
}
.cta-band::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(460px 200px at 88% 10%, rgba(63,130,247,.4), transparent 68%);
  pointer-events:none;
}
.cta-band > * { position:relative; }
.cta-band h2 { color:#fff; margin:0 0 var(--sp-2); font-size:var(--fs-h3); }
.cta-band p  { color:rgba(255,255,255,.8); margin:0; font-size:var(--fs-sm); max-width:52ch; }
.cta-band__actions { display:flex; flex-direction:column; gap:var(--sp-2); }
.cta-band__note { font-size:var(--fs-xs); color:rgba(255,255,255,.62); text-align:center; }
@media (max-width:800px) { .cta-band { grid-template-columns:1fr; padding:var(--sp-6) var(--sp-5); } }

.cta-inline {
  display:flex; align-items:center; gap:var(--sp-5); flex-wrap:wrap;
  background:var(--brand-50); border:1px solid var(--brand-200);
  border-radius:var(--r); padding:var(--sp-5); margin:var(--sp-6) 0;
}
.cta-inline p { margin:0; flex:1 1 320px; font-size:var(--fs-sm); color:var(--ink-700); }
.cta-inline strong { color:var(--ink-900); }

/* --------------------------------------------------------------------------
   11. ARTÍCULO
   -------------------------------------------------------------------------- */
.progress-bar {
  position:fixed; top:var(--header-h); left:0; height:3px; width:0;
  background:linear-gradient(90deg,var(--brand),var(--c-purple));
  z-index:99; transition:width .12s linear;
}

.breadcrumbs { font-size:var(--fs-xs); color:var(--ink-400); padding:var(--sp-5) 0 0; }
.breadcrumbs ol { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.42rem; }
.breadcrumbs li::after { content:'/'; margin-left:.42rem; color:var(--line-2); }
.breadcrumbs li:last-child::after { content:''; }
.breadcrumbs a { color:var(--ink-500); }

.article-head { padding:var(--sp-5) 0 var(--sp-6); }
.article-head h1 { max-width:19ch; margin:var(--sp-4) 0; }
.article-head__lead { font-size:var(--fs-lg); color:var(--ink-500); max-width:60ch; margin:0 0 var(--sp-5); }
.article-meta { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; font-size:var(--fs-sm); color:var(--ink-500); }
.article-meta .dot { width:3px; height:3px; border-radius:50%; background:var(--ink-400); }
.article-meta strong { color:var(--ink-700); font-weight:700; }

/* Portada del artículo */
.article-cover {
  border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--sh-md); margin-bottom:var(--sp-6);
}
.article-cover img { width:100%; }

.article-layout {
  display:grid; grid-template-columns:225px minmax(0,var(--read)) 260px;
  gap:var(--sp-7); justify-content:center; padding:var(--sp-6) 0 var(--sp-8);
}
@media (max-width:1160px) { .article-layout { grid-template-columns:205px minmax(0,1fr); } .article-aside { display:none; } }
@media (max-width:920px)  { .article-layout { grid-template-columns:1fr; gap:var(--sp-5); } .article-toc { display:none; } }

/* --- Índice lateral --- */
.article-toc { position:sticky; top:calc(var(--header-h) + var(--sp-5)); align-self:start; max-height:78vh; overflow-y:auto; }
.article-toc h2 { font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.12em; color:var(--ink-400); margin:0 0 var(--sp-3); font-weight:800; }
.article-toc ol { list-style:none; margin:0; padding:0; border-left:2px solid var(--line); }
.article-toc li a {
  display:block; padding:.4rem 0 .4rem var(--sp-4); margin-left:-2px;
  border-left:2px solid transparent; font-size:var(--fs-sm); line-height:1.42; color:var(--ink-500);
  transition:color .25s var(--ease), border-color .25s var(--ease), padding-left .25s var(--ease);
}
.article-toc li a:hover { color:var(--brand-ink); text-decoration:none; padding-left:calc(var(--sp-4) + 3px); }
.article-toc li a.is-active { color:var(--ink-900); font-weight:700; border-left-color:var(--brand); }

/* --- Cuerpo --- */
.prose { font-size:1.09rem; line-height:1.8; color:var(--ink-700); }
.prose > h2 { font-size:clamp(1.35rem,1.2vw + 1.05rem,1.7rem); margin:var(--sp-7) 0 var(--sp-4); scroll-margin-top:calc(var(--header-h) + 26px); }
.prose > h2:first-child { margin-top:0; }
.prose > h3 { margin:var(--sp-6) 0 var(--sp-3); scroll-margin-top:calc(var(--header-h) + 26px); }
.prose p { margin:0 0 var(--sp-5); }
.prose a { text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; text-decoration-color:var(--brand-200); transition:text-decoration-color .2s var(--ease); }
.prose a:hover { text-decoration-color:var(--brand); }
.prose ul,.prose ol { margin:0 0 var(--sp-5); padding-left:1.35rem; }
.prose li { margin-bottom:var(--sp-2); }
.prose li::marker { color:var(--brand); }
.prose strong { color:var(--ink-900); font-weight:700; }
.prose hr { border:0; border-top:1px solid var(--line); margin:var(--sp-7) 0; }

.prose blockquote {
  margin:var(--sp-6) 0; padding:var(--sp-2) 0 var(--sp-2) var(--sp-5);
  border-left:3px solid var(--brand); font-size:1.16rem; color:var(--ink-900);
}
.prose blockquote p:last-child { margin-bottom:0; }

/* Caja de dato */
.callout {
  display:flex; gap:var(--sp-4);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:var(--sp-5); margin:var(--sp-6) 0;
  font-size:var(--fs-sm); box-shadow:var(--sh-sm);
}
.callout__title { font-weight:800; color:var(--ink-900); margin-bottom:.35rem; font-size:var(--fs-sm); }
.callout p:last-child { margin-bottom:0; }
.callout > div:last-child { flex:1; }

/* Tablas */
.table-wrap {
  overflow-x:auto; margin:var(--sp-6) 0; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface); box-shadow:var(--sh-sm);
}
.prose table { width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.prose th,.prose td { padding:.85rem 1.05rem; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; }
.prose thead th { background:var(--canvas); color:var(--ink-900); font-weight:800; white-space:nowrap; }
.prose tbody tr { transition:background .2s var(--ease); }
.prose tbody tr:hover { background:var(--brand-50); }
.prose tbody tr:last-child td,.prose tbody tr:last-child th { border-bottom:0; }
.prose tbody th { font-weight:700; color:var(--ink-900); background:#FCFDFE; }
.prose td.is-win { color:var(--c-green); font-weight:700; }

/* FAQ */
.faq { margin:var(--sp-6) 0; }
.faq details {
  border:1px solid var(--line); border-radius:var(--r); margin-bottom:var(--sp-3);
  background:var(--surface); overflow:hidden; transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.faq details:hover { border-color:var(--line-2); }
.faq details[open] { border-color:var(--brand-200); box-shadow:var(--sh-sm); }
.faq summary {
  padding:var(--sp-4) var(--sp-5); cursor:pointer; font-weight:700; color:var(--ink-900);
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:var(--sp-4);
  font-size:var(--fs-md);
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after {
  content:''; width:11px; height:11px; flex-shrink:0;
  border-right:2px solid var(--brand); border-bottom:2px solid var(--brand);
  transform:rotate(45deg) translateY(-3px); transition:transform .3s var(--ease);
}
.faq details[open] summary::after { transform:rotate(225deg) translateY(-3px); }
.faq .faq__answer { padding:0 var(--sp-5) var(--sp-5); font-size:var(--fs-sm); animation:fadeIn .35s var(--ease); }
.faq .faq__answer p:last-child { margin-bottom:0; }

/* --- Lateral --- */
.article-aside { position:sticky; top:calc(var(--header-h) + var(--sp-5)); align-self:start; display:flex; flex-direction:column; gap:var(--sp-4); }
.aside-card { border:1px solid var(--line); border-radius:var(--r); padding:var(--sp-5); background:var(--surface); box-shadow:var(--sh-sm); }
.aside-card--cta {
  position:relative; overflow:hidden; border:0; color:#fff;
  background:linear-gradient(160deg,#0D1731,#2559C4);
}
.aside-card--cta::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(220px 130px at 80% 0%, rgba(63,130,247,.45), transparent 70%);
}
.aside-card--cta > * { position:relative; }
.aside-card--cta h3 { color:#fff; font-size:1.02rem; margin-bottom:var(--sp-2); }
.aside-card--cta p  { color:rgba(255,255,255,.78); font-size:var(--fs-xs); margin-bottom:var(--sp-4); }
.aside-card h3 { font-size:var(--fs-sm); margin-bottom:var(--sp-3); }
.aside-card ul { list-style:none; margin:0; padding:0; }
.aside-card li { margin-bottom:var(--sp-3); font-size:var(--fs-sm); line-height:1.44; }
.aside-card li:last-child { margin-bottom:0; }
.aside-card li a { color:var(--ink-700); transition:color .2s var(--ease); }
.aside-card li a:hover { color:var(--brand-ink); }

.share { display:flex; gap:var(--sp-2); align-items:center; }
.share__label { font-size:var(--fs-xs); color:var(--ink-400); margin-right:var(--sp-2); font-weight:600; }
.share a,.share button {
  width:38px; height:38px; display:grid; place-items:center;
  border:1px solid var(--line-2); border-radius:50%; background:#fff;
  color:var(--ink-500); cursor:pointer;
  transition:all .25s var(--ease);
}
.share a:hover,.share button:hover { border-color:var(--brand); color:var(--brand-ink); background:var(--brand-50); transform:translateY(-2px); }
.share button.is-copied { border-color:var(--c-green); color:var(--c-green); background:var(--c-green-bg); }
.share svg { width:16px; height:16px; }

.article-footer { border-top:1px solid var(--line); padding-top:var(--sp-5); margin-top:var(--sp-7); }
.related { background:var(--canvas); border-top:1px solid var(--line); padding:var(--sp-7) 0 var(--sp-8); }

/* --------------------------------------------------------------------------
   12. PIE — misma estructura que micros.plannam.com
   -------------------------------------------------------------------------- */
.site-footer { background:var(--ink-900); color:rgba(255,255,255,.6); padding:var(--sp-8) 0 var(--sp-5); font-size:var(--fs-sm); }
.site-footer a { color:rgba(255,255,255,.75); transition:color .2s var(--ease); }
.site-footer a:hover { color:#fff; }
.site-footer__grid { display:grid; grid-template-columns:1.3fr 1.1fr 1fr 1fr; gap:var(--sp-6); padding-bottom:var(--sp-6); border-bottom:1px solid rgba(255,255,255,.1); }
@media (max-width:880px) { .site-footer__grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .site-footer__grid { grid-template-columns:1fr; } }
.site-footer h4 { color:#fff; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.13em; margin-bottom:var(--sp-4); font-weight:800; }
.site-footer h5 { color:rgba(255,255,255,.92); font-size:var(--fs-sm); margin:0 0 .25rem; font-weight:700; }
.site-footer ul { list-style:none; margin:0; padding:0; }
.site-footer li { margin-bottom:var(--sp-2); }
.site-footer__logo img { height:40px; width:auto; margin-bottom:var(--sp-4); }
.site-footer__brand p { margin:0; max-width:32ch; line-height:1.6; }
.site-footer__office { margin-bottom:var(--sp-4); line-height:1.55; font-size:var(--fs-xs); color:rgba(255,255,255,.6); }
.site-footer__contact { margin-top:var(--sp-4); display:flex; flex-direction:column; gap:.3rem; font-size:var(--fs-xs); }
.site-footer__social { display:flex; gap:var(--sp-3); margin-top:var(--sp-5); }
.site-footer__social a {
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.08); color:rgba(255,255,255,.8);
  transition:all .25s var(--ease);
}
.site-footer__social a:hover { background:var(--brand); color:#fff; transform:translateY(-2px); }
.site-footer__social svg { width:16px; height:16px; }
.site-footer__bottom { padding-top:var(--sp-5); display:flex; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; font-size:var(--fs-xs); color:rgba(255,255,255,.42); }

/* --------------------------------------------------------------------------
   13. IMPRESIÓN
   -------------------------------------------------------------------------- */
@media print {
  .site-header,.filters,.article-toc,.article-aside,.cta-band,
  .cta-inline,.related,.progress-bar,.site-footer,.share { display:none !important; }
  .article-layout { grid-template-columns:1fr; }
  body { font-size:11pt; color:#000; }
  .reveal { opacity:1 !important; transform:none !important; }
}