/*
 * Estilo de una entrada del blog de ai-money.app.
 *
 * Se encola SOLO en `is_singular('post')` (ver functions.php §1). Las familias
 * Manrope e Inter ya las sirve el sitio en local desde el mu-plugin
 * `aimoney-local-fonts.php`; aquí no se declara ningún @font-face nuevo.
 *
 * Los valores no son inventados: salen del CSS que ya corre en la portada
 * (.aim-title es Manrope 800 con letter-spacing -1px y line-height 1.05, el hero
 * es #1A1A2E y el acento es el degradado #FFD93D → #FFB800).
 */

.aim-post{
  --aim-blue:#046BD2;
  --aim-navy:#263886;
  --aim-ink:#0F172A;
  --aim-ink-2:#1E293B;
  --aim-body:#334155;
  --aim-muted:#5E6B7D;
  --aim-line:#E4E8EF;
  --aim-soft:#F5F7FA;
  --aim-gold-a:#FFD93D;
  --aim-gold-b:#FFB800;
  --aim-hero:#1A1A2E;
  --aim-green:#16A34A;
  --aim-measure:68ch;

  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--aim-body);
  font-size:17px;
  line-height:1.7;
}

/* ---------------------------------------------------------------------------
   Anchos.
   Astra trae reglas de ancho con MÁS especificidad que cualquier selector
   razonable del hijo (`.ast-page-builder-template .site-content > .ast-container`
   y compañía, generadas en su CSS dinámico). Sin `!important` el artículo se
   queda en ~1080 px y pegado a la izquierda, que es lo que se veía.
   El `!important` está acotado a `body.single-post`: no alcanza a ninguna página
   ni a las cuatro portadas.
   Con el contenedor liberado, el hero es a sangre por ser `width:100%`, sin
   trucos de `100vw` (ese cálculo asume contenedor centrado y por eso fallaba).
   --------------------------------------------------------------------------- */
body.aim-reading #content > .ast-container,
body.aim-reading #primary,
body.aim-reading .aim-post{
  max-width:none !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0;
  background:transparent;
}
body.aim-reading #content,
body.aim-reading .site-content{background:transparent;padding:0}

.aim-hero{
  background:var(--aim-hero);
  color:#fff;
  padding:44px 24px 40px;
  margin:0 0 38px;
}
.aim-hero__in{max-width:1080px;margin:0 auto}

/* El carril de lectura. Un solo valor gobierna hero, cuerpo y barra pegajosa,
   para que las tres columnas queden alineadas a la misma guía. */
.aim-hero__in,
.aim-body{--aim-rail:1080px}

.aim-crumbs{font-size:12.5px;color:#8A93AB;margin-bottom:18px}
.aim-crumbs a{color:#8A93AB;text-decoration:none}
.aim-crumbs a:hover{color:#fff;text-decoration:underline}

.aim-kicker{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--aim-gold-b);text-decoration:none;
  border:1px solid rgba(255,184,0,.35);border-radius:99px;padding:5px 11px;margin-bottom:16px;
}
.aim-kicker:hover{background:rgba(255,184,0,.1);color:var(--aim-gold-a)}

.aim-h1{
  font-family:Manrope,Inter,sans-serif;
  font-size:clamp(28px,3.6vw,44px);font-weight:800;line-height:1.05;letter-spacing:-1px;
  margin:0 0 16px;color:#fff;text-wrap:balance;max-width:20ch;
}
/* Un <em> dentro del H1 pinta el diferencial con el dorado de la portada. */
.aim-h1 em{
  font-style:normal;
  background:linear-gradient(135deg,var(--aim-gold-a) 0%,var(--aim-gold-b) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

.aim-byline{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-top:22px}
.aim-avatar{
  width:42px;height:42px;border-radius:50%;flex:none;
  border:2px solid rgba(255,255,255,.18);
}
.aim-who{font-size:14px;color:#fff;font-weight:600;line-height:1.35}
.aim-who small{display:block;font-weight:400;color:#8A93AB;font-size:12.5px;margin-top:2px}

/* ---------------------------------------------------------------------------
   Rejilla: índice pegajoso + columna de lectura
   --------------------------------------------------------------------------- */
.aim-body{
  display:grid;grid-template-columns:212px minmax(0,1fr);gap:44px;align-items:start;
  max-width:1080px;margin:0 auto;padding:0 24px 56px;
}
/* ⚠️ Sin índice hay que colapsar la rejilla a UNA columna. Si no, el contenido
   ocupa la primera pista —la de 212 px reservada al índice— y el artículo se
   lee en una tira estrecha pegada a la izquierda. Pasa en cuanto un texto tiene
   dos encabezados o menos, y en toda página de herramienta corta. */
.aim-body--notoc{grid-template-columns:minmax(0,1fr)}
.aim-body--notoc .aim-content{margin:0 auto}
/* El carril de lectura se topa con la medida tipográfica Y con su
   contenedor. Sin el min(), un hijo ancho (una tabla) ensancha la pista
   auto de la rejilla hasta su max-content y la pagina entera se desplaza
   de lado en el móvil: un overflow-x:auto en la tabla no sirve de nada
   si nadie le pone techo al carril. */
.aim-content{min-width:0;max-width:min(100%,var(--aim-measure))}

.aim-toc{position:sticky;top:24px}
.aim-toc__t{
  font-family:Inter,sans-serif;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--aim-muted);
  margin:0 0 12px;font-weight:700;
  /* En escritorio es una etiqueta, no un control: sin triángulo y sin cursor. */
  list-style:none;cursor:default;
}
.aim-toc__t::-webkit-details-marker{display:none}
.aim-toc__t::marker{content:""}
.aim-toc ol{list-style:none;margin:0;padding:0}
.aim-toc li{margin:0 0 2px}
.aim-toc a{
  display:block;font-size:13.5px;line-height:1.4;color:var(--aim-muted);text-decoration:none;
  padding:7px 10px 7px 12px;border-left:2px solid var(--aim-line);border-radius:0 6px 6px 0;
}
.aim-toc a:hover,.aim-toc a:focus-visible{color:var(--aim-blue);background:var(--aim-soft)}

/* ---------------------------------------------------------------------------
   Tipografía del cuerpo
   --------------------------------------------------------------------------- */
.aim-content p{margin:0 0 20px}
.aim-content h2{
  font-family:Manrope,Inter,sans-serif;font-size:27px;font-weight:800;letter-spacing:-.5px;
  line-height:1.2;color:var(--aim-ink);margin:40px 0 14px;text-wrap:balance;scroll-margin-top:24px;
}
.aim-content h3{
  font-family:Manrope,Inter,sans-serif;font-size:19px;font-weight:700;letter-spacing:-.2px;
  color:var(--aim-ink-2);margin:30px 0 10px;
}
.aim-content a{color:var(--aim-blue);text-decoration:underline;text-underline-offset:2px}
.aim-content strong{color:var(--aim-ink);font-weight:650}
.aim-content ul,.aim-content ol{margin:0 0 20px;padding-left:20px}
.aim-content li{margin-bottom:9px}
.aim-content li::marker{color:var(--aim-blue)}

/* ---------------------------------------------------------------------------
   Respuesta corta.
   Es el bloque que un extractor levanta y cita, así que es lo más visible
   después del título. Se activa de dos formas para que redactar sea fácil:
   poniendo la clase `aim-answer` al bloque, o simplemente empezando el artículo
   con una cita. Su primera frase DEBE entenderse sin el contexto de alrededor.
   --------------------------------------------------------------------------- */
.aim-content .aim-answer,
.aim-content > .wp-block-quote:first-child{
  border:1px solid #CFE1F7;
  border-left:4px solid var(--aim-blue);
  background:linear-gradient(180deg,#F4F9FF 0%,#FFFFFF 100%);
  border-radius:0 14px 14px 0;
  padding:20px 24px;margin:0 0 30px;
  font-size:18px;line-height:1.62;color:var(--aim-ink-2);
}
/* El japonés no tiene cursiva: las familias CJK no traen un corte oblicuo,
   así que el navegador inclina los glifos por cálculo y los kanji salen
   deformados. La cursiva es decoración, la legibilidad no. */
:lang(ja) .aim-content .aim-answer,
:lang(ja) .aim-content > .wp-block-quote:first-child{font-style:normal}

.aim-content .aim-answer p:last-child,
.aim-content > .wp-block-quote:first-child p:last-child{margin-bottom:0}
.aim-content .aim-answer strong,
.aim-content > .wp-block-quote:first-child strong{color:var(--aim-ink);font-weight:700}

/* Dato propio destacado: es el formato que más se cita, conviene que se vea. */
.aim-content .aim-stat{
  display:flex;gap:20px;align-items:center;flex-wrap:wrap;
  border:1px solid var(--aim-line);border-radius:14px;padding:20px 24px;margin:28px 0;
  background:var(--aim-soft);
}
.aim-content .aim-stat strong:first-child{
  font-family:Manrope,sans-serif;font-size:44px;font-weight:800;color:var(--aim-blue);
  line-height:1;letter-spacing:-2px;font-variant-numeric:tabular-nums;
}

/* ---------------------------------------------------------------------------
   Tablas, imágenes y citas
   --------------------------------------------------------------------------- */
.aim-content .wp-block-table{margin:26px 0;overflow-x:auto;border:1px solid var(--aim-line);border-radius:14px}
.aim-content table{border-collapse:collapse;width:100%;font-size:14.5px;background:#fff}
.aim-content th{
  text-align:left;background:var(--aim-soft);color:var(--aim-muted);font-weight:700;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:12px 16px;
  border-bottom:1px solid var(--aim-line);white-space:nowrap;
}
.aim-content td{padding:12px 16px;border-bottom:1px solid var(--aim-line);vertical-align:top;line-height:1.5}
.aim-content tr:last-child td{border-bottom:0}
.aim-content .wp-block-table figcaption{
  padding:11px 16px;font-size:13px;color:var(--aim-muted);border-top:1px solid var(--aim-line);
}

.aim-content .wp-block-image{margin:28px 0}
.aim-content img{max-width:100%;height:auto;border-radius:14px;display:block}
.aim-content figcaption{font-size:13px;color:var(--aim-muted);margin-top:9px;line-height:1.5}

/* ---------------------------------------------------------------------------
   FAQ.
   Se estiliza el bloque de preguntas frecuentes de Yoast, no un acordeón
   propio: así lo que se ve y lo que va en el `FAQPage` son literalmente lo
   mismo y no pueden desincronizarse, que es el fallo que hoy tienen las
   portadas.
   --------------------------------------------------------------------------- */
.aim-content .schema-faq{margin:38px 0 0;border-top:1px solid var(--aim-line);padding-top:8px}
.aim-content .schema-faq-section{border-bottom:1px solid var(--aim-line);padding:16px 0}
.aim-content .schema-faq-question{
  display:block;font-weight:650;color:var(--aim-ink);font-size:16.5px;line-height:1.4;
}
.aim-content .schema-faq-answer{margin:10px 0 0;font-size:16px;color:var(--aim-body)}
.aim-content .schema-faq-answer p:last-child{margin-bottom:0}

/* ---------------------------------------------------------------------------
   Llamada a descargar y autoría
   --------------------------------------------------------------------------- */
.aim-cta{
  margin:44px 0 0;border-radius:16px;padding:28px 28px 26px;color:#fff;
  background:linear-gradient(135deg,var(--aim-navy) 0%,var(--aim-blue) 100%);
}

/* Fila de identidad: icono real de la tienda + nombre. Es lo que convierte un
   recuadro azul con texto en «una app que existe y me puedo bajar». */
.aim-cta__app{display:flex;align-items:center;gap:13px;margin-bottom:20px}
.aim-cta__icon{
  width:56px;height:56px;border-radius:14px;flex:none;display:block;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
}
.aim-cta__name{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.aim-cta__name b{
  font-family:Manrope,Inter,sans-serif;font-size:18px;font-weight:800;
  color:#fff;letter-spacing:-.3px;
}
.aim-cta__name small{font-size:13.5px;color:#BBCDEC}

.aim-cta h2{
  font-family:Manrope,Inter,sans-serif;font-size:23px;font-weight:800;
  margin:0 0 18px;color:#fff;letter-spacing:-.4px;line-height:1.22;text-wrap:balance;
}

.aim-cta__btns{display:flex;gap:12px;flex-wrap:wrap}

/* ---------------------------------------------------------------------------
   Badge de tienda.
   Reproduce el botón que todo el mundo reconoce con HTML y SVG en vez de la
   imagen oficial: esas llevan el texto en inglés incrustado y aquí hacen falta
   cuatro idiomas. El ancho es fluido, así que un texto más largo (japonés,
   portugués) ensancha el botón en lugar de recortarlo.
   --------------------------------------------------------------------------- */
.aim-store{
  display:inline-flex;align-items:center;gap:11px;
  background:#000;border:1px solid rgba(255,255,255,.34);border-radius:10px;
  padding:8px 18px;min-height:58px;
  /* Sombra generosa: sobre el degradado azul, un rectángulo negro plano se
     hunde en el fondo. Levantarlo es lo que lo hace ver pulsable. */
  box-shadow:0 8px 22px rgba(0,0,0,.34);
  transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease;
  -webkit-tap-highlight-color:transparent;
}
/* El CTA vive dentro de `.aim-content`, donde TODO enlace va subrayado y azul.
   Sin estas anulaciones el badge sale sin caja, con «App Store» subrayado en
   azul y la manzana azul (el path hereda `currentColor`). Hace falta
   `.aim-content .aim-store` (0,2,0): `.aim-content a` es (0,1,1) y ganaba. */
.aim-cta a,
.aim-content .aim-store,
.aim-content .aim-store:hover,
.aim-content .aim-store:visited{text-decoration:none;color:#fff}
.aim-store:hover{border-color:rgba(255,255,255,.7);box-shadow:0 12px 28px rgba(0,0,0,.42);transform:translateY(-2px)}
.aim-store:active{transform:translateY(0) scale(.985);box-shadow:0 4px 14px rgba(0,0,0,.3)}
.aim-store:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* El logo ocupa ~60% del alto, como en los badges reales. */
.aim-store__logo{width:33px;height:33px;flex:none;display:block}

.aim-store__txt{display:flex;flex-direction:column;line-height:1.08;min-width:0}
.aim-store__txt small{
  font-size:11px;font-weight:400;color:#fff;white-space:nowrap;margin-bottom:2px;
}
.aim-store__txt b{
  /* Inter y no Manrope: es casi la SF Pro del badge original. Manrope, que es
     geométrica, lo hacía ver pesado y ajeno a la marca. */
  font-family:Inter,-apple-system,sans-serif;
  font-size:21px;font-weight:600;letter-spacing:-.45px;color:#fff;white-space:nowrap;
}
/* Apple escribe la línea corta en caja baja; Google, en versales. */
.aim-btn-android .aim-store__txt small{text-transform:uppercase;letter-spacing:.06em;font-size:10px}

/* Solo se ve la tienda del visitante. Sin clase en el <html> (escritorio o JS
   caído) se ven las dos, que es el respaldo correcto. */
html.aim-ios .aim-btn-android,
html.aim-android .aim-btn-ios{display:none !important}

/* Tres razones para no dudar, con palomita. Sustituyen a la línea corrida de
   puntos medios, que repetía el subtítulo y no se leía.
   ⚠️ Va con `.aim-content` delante (0,2,0) porque `.aim-content ul` (0,1,1) le
   mete `padding-left:20px` y `margin-bottom:20px` a toda lista del artículo:
   sin esto la lista queda indentada 20 px y no alinea ni con el badge ni con el
   titular, que era lo que descuadraba la tarjeta. */
.aim-content .aim-cta__checks{
  list-style:none;margin:26px 0 0;padding:0;
  display:flex;gap:9px 22px;flex-wrap:wrap;
}
.aim-content .aim-cta__checks li{margin:0}
.aim-cta__checks li{
  margin:0;font-size:13.5px;color:#D2DFF5;display:flex;align-items:center;gap:7px;line-height:1.4;
}
.aim-cta__checks li::before{
  content:"";flex:none;width:15px;height:15px;border-radius:50%;
  background:var(--aim-gold-b);
  /* Palomita dibujada con la propia máscara: sin icono extra que descargar. */
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zm4 5.7l-5 5.2-3-3 1-1 2 2 4-4.2z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zm4 5.7l-5 5.2-3-3 1-1 2 2 4-4.2z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.aim-author{
  margin-top:34px;padding-top:22px;border-top:1px solid var(--aim-line);
  display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;
}
.aim-avatar--lg{width:52px;height:52px;border:0}
.aim-author__bio{flex:1;min-width:240px;font-size:14px;color:var(--aim-muted);line-height:1.6}
.aim-author__lbl{
  display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:#9AA3B2;font-weight:700;margin-bottom:4px;
}
.aim-author__bio b{
  display:block;color:var(--aim-ink);font-size:15.5px;font-weight:700;margin-bottom:5px;
  font-family:Manrope,sans-serif;
}
.aim-author__bio p{margin:0}
.aim-dates{font-size:12.5px;color:#9AA3B2;margin-top:10px}

/* --------------------------------------------------------------------------- */
.aim-post :focus-visible{outline:2px solid var(--aim-blue);outline-offset:3px;border-radius:3px}

/* ===========================================================================
   MÓVIL. Es la vista principal: de ahí llega la gente.
   =========================================================================== */
@media (max-width:860px){
  .aim-post{font-size:16.5px;line-height:1.68}

  .aim-hero{padding:26px 18px 24px;margin-bottom:24px}
  .aim-h1{font-size:clamp(25px,7vw,32px);letter-spacing:-.6px;max-width:none}
  .aim-crumbs{margin-bottom:14px;font-size:12px}
  .aim-byline{margin-top:18px;gap:11px}

  .aim-body{grid-template-columns:1fr;gap:22px;padding:0 18px 40px}

  /* El índice pasa a plegable: en una pantalla estrecha, seis secciones fijas
     empujan el texto por debajo del pliegue. */
  .aim-toc{
    position:static;border:1px solid var(--aim-line);border-radius:12px;
    padding:4px 14px;background:var(--aim-soft);
  }
  .aim-toc__t{margin:0;padding:12px 0;cursor:pointer;list-style:none}
  .aim-toc__t::-webkit-details-marker{display:none}
  .aim-toc__t::after{content:"+";float:right;color:var(--aim-blue);font-size:15px;line-height:1}
  .aim-toc[open] .aim-toc__t::after{content:"–"}
  .aim-toc ol{padding-bottom:10px}
  .aim-toc a{padding:9px 10px 9px 12px;font-size:14px}

  .aim-content h2{font-size:23px;margin:32px 0 12px}
  .aim-content h3{font-size:18px;margin:26px 0 9px}
  .aim-content .aim-answer,
  .aim-content > .wp-block-quote:first-child{padding:17px 18px;font-size:17px}
  .aim-content .aim-stat{padding:17px 18px;gap:14px}
  .aim-content .aim-stat strong:first-child{font-size:38px}
  .aim-content table{font-size:13.5px}
  .aim-content th,.aim-content td{padding:10px 12px}

  .aim-cta{padding:22px 18px 22px;border-radius:16px;margin-top:34px}
  .aim-cta__app{gap:12px;margin-bottom:18px}
  .aim-cta__icon{width:52px;height:52px;border-radius:13px}
  .aim-cta h2{font-size:21px;margin-bottom:20px}
  /* La sombra del badge se come el hueco: hace falta más aire del que parece
     para que el botón y la lista no se lean como un solo bloque pegado. */
  .aim-content .aim-cta__checks{flex-direction:column;gap:10px;margin-top:26px}
  /* El badge NO se estira a todo el ancho: un badge de tienda es siempre de
     proporción ~3,4:1 y estirado se ve deformado, nada que ver con el que la
     gente reconoce. Conserva su tamaño natural y se alinea a la izquierda, con
     el mismo borde que el título y el texto de arriba. */
  .aim-cta__btns{flex-direction:column;gap:10px;align-items:flex-start}
  /* El badge NO se estira a todo el ancho (un badge real es ~3,4:1 y estirado
     se ve deformado), pero SÍ crece: a tamaño natural se ve pequeño y tímido en
     un teléfono, y este botón es la acción final de todo el artículo. */
  .aim-store{width:auto;max-width:100%;justify-content:flex-start;min-height:64px;padding:10px 24px;border-radius:12px}
  .aim-store__logo{width:36px;height:36px}
  .aim-store__txt small{font-size:11.5px}
  .aim-store__txt b{font-size:23px}

  .aim-author{gap:13px}
  .aim-author__bio{min-width:0}

  /* Hueco para que la barra pegajosa no tape el final del artículo. */
  .aim-post{padding-bottom:76px}

  .aim-dlbar{
    display:flex;align-items:center;gap:11px;
    position:fixed;left:0;right:0;bottom:0;z-index:99;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(26,26,46,.97);
    -webkit-backdrop-filter:saturate(140%) blur(8px);
    backdrop-filter:saturate(140%) blur(8px);
    border-top:1px solid rgba(255,255,255,.1);
  }
  .aim-dlbar .aim-mark--sm{width:36px;height:36px;font-size:13px;border:0}
  .aim-dlbar__t{flex:1;min-width:0;line-height:1.25}
  .aim-dlbar__t b{display:block;color:#fff;font-size:14px;font-weight:700}
  .aim-dlbar__t small{display:block;color:#9AA3B8;font-size:11.5px}
  .aim-dlbar__btn{
    flex:none;background:var(--aim-blue);color:#fff;text-decoration:none;
    font-weight:700;font-size:14.5px;padding:11px 18px;border-radius:99px;
    min-height:44px;display:inline-flex;align-items:center;
  }
  .aim-dlbar__close{
    flex:none;width:30px;height:30px;display:grid;place-items:center;cursor:pointer;
    color:#7C8499;font-size:20px;line-height:1;border-radius:50%;
  }
}

@media (max-width:400px){
  .aim-hero{padding:22px 15px 20px}
  .aim-body{padding:0 15px 36px}
  .aim-dlbar__t small{display:none}
  .aim-content .aim-stat strong:first-child{font-size:32px}
}

/* ---------------------------------------------------------------------------
   Marca de autoría.
   Cuadrado con el degradado de la marca en vez de un avatar: los artículos los
   firma AI Money, no una persona (ver functions.php §6), y un avatar genérico
   de WordPress solo confundiría sobre quién responde por el texto.
   --------------------------------------------------------------------------- */
.aim-mark{
  width:42px;height:42px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--aim-blue) 0%,var(--aim-navy) 100%);
  color:#fff;font-family:Manrope,sans-serif;font-weight:800;font-size:15px;
  letter-spacing:-.5px;border:2px solid rgba(255,255,255,.18);
}
.aim-mark--lg{width:52px;height:52px;font-size:18px;border:0}

/* ---------------------------------------------------------------------------
   Aviso de transparencia.
   Se ve, y esa es toda la intención: en un artículo donde la marca que publica
   es una de las comparadas, esconder la advertencia en cursiva pequeña es lo
   que hace que el texto se lea como publicidad encubierta. Declararlo alto
   produce el efecto contrario y además es señal de confianza para Google.
   --------------------------------------------------------------------------- */
.aim-content .aim-disclosure{
  border:1px solid var(--aim-line);
  border-left:4px solid var(--aim-gold-b);
  background:#FFFBF2;
  border-radius:0 12px 12px 0;
  padding:15px 18px;margin:0 0 28px;
  font-size:14.5px;line-height:1.6;color:#5A5340;
}
.aim-content .aim-disclosure strong{color:#7A5B00}

/* ---------------------------------------------------------------------------
   Páginas de herramienta (plantilla template-tool.php).
   Reusan todo el diseño del artículo; solo cambian las señales de fecha y
   categoría, que en contenido perenne envejecen la página sin aportar nada.
   --------------------------------------------------------------------------- */
.aim-kicker--static{cursor:default}
.aim-hero__sub{
  margin:14px 0 0;font-size:17px;line-height:1.6;color:#B9C4DC;max-width:56ch;
}
.aim-dates--tool{
  margin:26px 0 0;padding-top:16px;border-top:1px solid var(--aim-line);
  font-size:12.5px;color:#9AA3B2;
}
@media (max-width:860px){
  .aim-hero__sub{font-size:16px;margin-top:12px}
}

/* ---------------------------------------------------------------------------
   Índice de herramientas (página madre /herramientas/).
   Tarjetas grandes y pulsables: en móvil una lista de enlaces de texto es
   difícil de acertar con el pulgar, y esta página existe justamente para
   repartir clics hacia las calculadoras.
   --------------------------------------------------------------------------- */
.aim-content .aim-tools{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.aim-content .aim-tools li{margin:0}
.aim-tools a{
  display:flex;align-items:flex-start;gap:14px;
  border:1px solid var(--aim-line);border-radius:14px;padding:18px 20px;
  background:#fff;text-decoration:none;color:inherit;
  transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease;
}
.aim-tools a:hover{
  border-color:var(--aim-blue);text-decoration:none;
  box-shadow:0 10px 26px -16px rgba(4,107,210,.5);transform:translateY(-1px);
}
.aim-tools__ico{
  flex:none;width:44px;height:44px;border-radius:12px;
  background:rgba(4,107,210,.1);display:grid;place-items:center;font-size:21px;line-height:1;
}
.aim-tools__t{display:flex;flex-direction:column;min-width:0}
.aim-tools__t b{
  font-family:Manrope,Inter,sans-serif;font-size:17px;font-weight:700;
  color:var(--aim-ink);letter-spacing:-.2px;line-height:1.3;margin-bottom:5px;
}
.aim-tools__t small{font-size:14px;color:var(--aim-muted);line-height:1.55}
@media (max-width:860px){
  .aim-tools a{padding:16px;gap:12px}
  .aim-tools__ico{width:40px;height:40px;font-size:19px}
  .aim-tools__t b{font-size:16px}
}

/* ---------------------------------------------------------------------------
   Portada del blog: listado de entradas y estado vacío.
   El carril es más ancho que el de lectura porque aquí no se lee prosa, se
   escanea una lista.
   --------------------------------------------------------------------------- */
.aim-content--wide{max-width:780px}

.aim-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.aim-content .aim-list{padding-left:0}
.aim-list__i{margin:0}
.aim-list a{
  display:flex;gap:18px;align-items:flex-start;text-decoration:none;color:inherit;
  border:1px solid var(--aim-line);border-radius:14px;padding:18px;background:#fff;
  transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease;
}
.aim-list a:hover{
  border-color:var(--aim-blue);text-decoration:none;transform:translateY(-1px);
  box-shadow:0 12px 28px -18px rgba(4,107,210,.55);
}
.aim-list__img{flex:0 0 148px;border-radius:10px;overflow:hidden;line-height:0}
.aim-list__img img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10;border-radius:10px}
.aim-list__t{display:flex;flex-direction:column;min-width:0}
.aim-list__t em{
  font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--aim-blue);margin-bottom:7px;
}
.aim-list__t b{
  font-family:Manrope,Inter,sans-serif;font-size:19px;font-weight:700;letter-spacing:-.25px;
  line-height:1.28;color:var(--aim-ink);margin-bottom:7px;text-wrap:balance;
}
.aim-list__t small{font-size:14.5px;color:var(--aim-muted);line-height:1.55;margin-bottom:9px}
.aim-list__t i{font-style:normal;font-size:12.5px;color:#9AA3B2}

.aim-empty{
  border:1px dashed var(--aim-line);border-radius:16px;padding:40px 28px;text-align:center;
}
.aim-empty__ico{font-size:34px;line-height:1;display:block;margin-bottom:14px}
.aim-empty b{
  display:block;font-family:Manrope,Inter,sans-serif;font-size:19px;font-weight:700;
  color:var(--aim-ink);margin-bottom:8px;
}
.aim-empty p{margin:0 auto 18px;max-width:44ch;color:var(--aim-muted);font-size:15px}
.aim-empty__cta{
  display:inline-flex;align-items:center;min-height:46px;padding:0 22px;border-radius:99px;
  background:var(--aim-blue);color:#fff;font-weight:700;font-size:15px;text-decoration:none;
}
.aim-content .aim-empty__cta:hover{background:var(--aim-navy);color:#fff;text-decoration:none}

.aim-pager{margin:28px 0 0}
.aim-pager .nav-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.aim-pager .page-numbers{
  display:grid;place-items:center;min-width:42px;min-height:42px;padding:0 12px;
  border:1px solid var(--aim-line);border-radius:10px;text-decoration:none;
  color:var(--aim-ink-2);font-size:14.5px;font-weight:600;
}
.aim-pager .page-numbers.current{background:var(--aim-blue);border-color:var(--aim-blue);color:#fff}
.aim-content .aim-pager a.page-numbers:hover{border-color:var(--aim-blue);color:var(--aim-blue);text-decoration:none}

@media (max-width:640px){
  .aim-list a{flex-direction:column;gap:13px;padding:15px}
  .aim-list__img{flex:none;width:100%}
  .aim-list__t b{font-size:17.5px}
  .aim-empty{padding:30px 20px}
}

/* ---------------------------------------------------------------------------
   Capturas de pantalla del móvil dentro de un artículo.
   Una captura de teléfono es muy alta: a 420 px de ancho ocupa más de 900 de
   alto y en escritorio parte la lectura en dos. Se limita por ALTURA, que es la
   dimensión que molesta, y el ancho se deduce solo manteniendo la proporción.
   --------------------------------------------------------------------------- */
.aim-content .aim-shot{margin:30px 0}
.aim-content .aim-shot img{
  max-height:520px;width:auto;max-width:100%;margin:0 auto;display:block;
  border:1px solid var(--aim-line);border-radius:16px;
  box-shadow:0 18px 40px -22px rgba(16,21,40,.45);
}
.aim-content .aim-shot figcaption{text-align:center;max-width:52ch;margin:12px auto 0}

@media (max-width:640px){
  .aim-content .aim-shot img{max-height:none;width:100%;border-radius:14px}
}

/* ---------------------------------------------------------------------------
   Bloque «seguir leyendo» del final de cada pieza.
   Son enlaces internos de verdad, no un adorno: reparten autoridad entre las
   páginas y son lo que Yoast analiza (mira el contenido del post, no la página
   renderizada, así que unos enlaces puestos por la plantilla no le constarían).
   --------------------------------------------------------------------------- */
.aim-content .aim-more{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:9px}
.aim-content .aim-more li{margin:0}
.aim-more a{
  display:flex;align-items:center;gap:11px;
  border:1px solid var(--aim-line);border-radius:12px;padding:14px 16px;
  background:#fff;color:var(--aim-ink);text-decoration:none;font-size:15.5px;font-weight:600;
  transition:border-color .12s ease,transform .12s ease;
}
.aim-more a::before{
  content:"";flex:none;width:7px;height:7px;border-right:2px solid var(--aim-blue);
  border-bottom:2px solid var(--aim-blue);transform:rotate(-45deg);
}
.aim-content .aim-more a:hover{border-color:var(--aim-blue);text-decoration:none;transform:translateX(2px)}


/* Entradilla opcional de la tarjeta de descarga. Solo aparece donde la promesa
   necesita una frase de contexto (por ejemplo la herramienta de renta); las
   páginas que no la pasan siguen igual que siempre. */
.aim-cta__lead{
  margin:-6px 0 18px;font-size:15px;line-height:1.55;color:#CBDBF3;
}

/* -------------------------------------------------------------------------- */
/* CTA de descarga compacto dentro del cuerpo ([aim_inline_cta])              */
/* Reutiliza los botones .aim-store; solo aporta el contenedor y el texto.    */
/* -------------------------------------------------------------------------- */
.aim-content .aim-inlinecta{
	display:flex;align-items:center;gap:18px;flex-wrap:wrap;
	background:linear-gradient(135deg,#101f47,#1c2b66);
	border:1px solid rgba(255,255,255,.10);
	border-radius:18px;padding:18px 20px;margin:30px 0;
	box-shadow:0 14px 34px rgba(8,14,40,.30);
}
.aim-inlinecta__icon{width:58px;height:58px;border-radius:14px;flex:none;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.aim-inlinecta__txt{display:flex;flex-direction:column;min-width:150px;flex:1 1 210px;line-height:1.25}
.aim-inlinecta__txt b{color:#fff;font-size:18px;font-weight:800;margin:0}
.aim-inlinecta__txt span{color:#BBCDEC;font-size:13.5px;margin-top:4px}
.aim-inlinecta__btns{display:flex;gap:10px;flex-wrap:wrap}
/* movil: botones a ancho natural y centrados, sin estirarse (en iOS solo se ve uno) */
.aim-inlinecta__btns .aim-store{flex:0 0 auto}
@media(max-width:600px){
	.aim-content .aim-inlinecta{padding:16px 16px 18px;gap:14px;text-align:center;flex-direction:column}
	.aim-inlinecta__icon{width:54px;height:54px}
	.aim-inlinecta__txt{flex:1 1 100%;align-items:center}
	.aim-inlinecta__btns{width:100%;justify-content:center;gap:12px}
	.aim-inlinecta__btns .aim-store{flex:0 1 auto;min-width:230px;justify-content:center}
}