/* ============================================================
   /blog/ — CSS propio y exclusivo de esta pagina.
   No toca ez-design-system-v2. Todo scoped bajo
   .ez-blog-page.ez-blog-studio (selector raiz real del <main>).
   ------------------------------------------------------------
   11/08/2026: la portada tenia cuatro bloques explicativos despues
   de las tarjetas -"Sobre este blog", "Temas que cubrimos", FAQ y
   "Politica editorial"- que sumaban 1.923px en escritorio y 3.253px
   en movil: varias veces mas alto que los tres articulos que la
   pagina existe para mostrar. Los cuatro se consolidan en un solo
   sello editorial compacto (una franja, no cuatro secciones) mas un
   CTA final directo. Las reglas viejas de .ez-blog-intro,
   .ez-blog-topics y .ez-blog-guide--faq/--policy se borraron del
   CSS compartido junto con el HTML que targeteaban.
   ============================================================ */

/* ============================================================
   PALETA FRIA (12/08/2026)
   ------------------------------------------------------------
   El sello editorial habia quedado en marfil calido (0xfbfaf7) y
   el CTA cerraba con un boton dorado grande: la mitad inferior de
   la pagina derivaba a una composicion beige/dorada que no es el
   lenguaje del estudio -blanco, azul institucional, superficies
   frias- y menos en un blog fiscal y tecnico.

   Toda la portada pasa a blanco + azul. El dorado se conserva
   SOLO como microacento (linea superior de cada tarjeta, badge y
   categoria, regla corta bajo el H2 del CTA, subrayado de foco):
   nunca como fondo de seccion, boton grande ni borde de ancho
   completo.

   Secuencia: navy > 0xf7fafc > 0xeef4f8 > 0xffffff > navy.
   ============================================================ */
:root {
  --blog-white: #ffffff;
  --blog-blue-white: #f7fafc;
  --blog-blue-mist: #eef4f8;
  --blog-blue-line: #cbd8e5;
  --blog-navy: #0b2c4d;
  --blog-navy-deep: #061d36;
  --blog-gold-accent: #c8a968;
}

/* --- Ritmo de fondos ------------------------------------------
   Las utilidades .ez-bg-off / .ez-bg-white ya estan en el HTML
   pero pierden contra reglas mas especificas de ez-design-system,
   asi que los fondos se fijan aca, dentro del scope de la pagina. */
.ez-blog-page.ez-blog-studio .ez-blog-list {
  background: var(--blog-blue-white);
}
.ez-blog-page.ez-blog-studio .ez-blog-card {
  background: var(--blog-white);
  border-color: var(--blog-blue-line);
}

/* El eyebrow del sistema es una pildora con fondo dorado al 22 %
   (--gold-soft). Sobre el azul niebla del sello se lee como una
   mancha beige, que es justo lo que este pase saca. Se enfria solo
   la variante --dark (sello y CTA); el eyebrow del hero es texto
   dorado sobre navy y ahi el dorado SI es identidad: no se toca. */
.ez-blog-page.ez-blog-studio .ez-eyebrow--dark {
  color: var(--blog-navy);
  background: var(--blog-white);
  border-color: var(--blog-blue-line);
}

/* --- Sello editorial: una franja, no cuatro bloques ---------- */
.ez-blog-page.ez-blog-studio .ez-blog-seal {
  background: #eaf1f6;
  /* Reemplaza la linea dorada de 2px que recorria los 1.440px del
     bloque: a ancho completo el dorado deja de ser acento y pasa a
     teñir la seccion entera. */
  border-top: 1px solid var(--blog-blue-line);
  border-bottom: 1px solid var(--blog-blue-line);
  padding-block: var(--sp-5);
}
.ez-blog-page.ez-blog-studio .ez-blog-seal .ez-section__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr);
  gap: var(--sp-8);
  align-items: center;
}
.ez-blog-page.ez-blog-studio .ez-blog-seal__heading h2 {
  margin: var(--sp-1) 0 0;
  color: var(--blog-navy-deep);
  font-size: 1.2rem;
  line-height: 1.25;
}
.ez-blog-page.ez-blog-studio .ez-blog-seal__body p {
  margin: 0 0 var(--sp-2);
  color: #334e68;
  /* El 62ch venia de calcar el tope de lectura que usa el resto del
     sitio para bloques de texto largo, pero acá corta la columna
     bastante antes que el borde derecho de la grilla de tarjetas: el
     sello queda mas angosto que las tres tarjetas de arriba, con una
     franja blanca vacia a la derecha. El sello es una franja de
     confianza corta -dos oraciones-, no un bloque de lectura larga:
     usa el ancho real de su columna (66% de la grilla), como el resto
     del contenido de esta pagina. */
  width: 100%;
  max-width: none;
  min-width: 0;
  line-height: 1.45;
  font-size: 0.94rem;
}
/* Va con `p.` a proposito: la regla de arriba es
   `.ez-blog-seal__body p` y le ganaba por el selector de elemento,
   asi que la nota heredaba el gris del cuerpo en vez del suyo. */
.ez-blog-page.ez-blog-studio p.ez-blog-seal__note {
  font-size: 0.85rem;
  color: #526b82;
}
.ez-blog-page.ez-blog-studio .ez-blog-seal__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
}
.ez-blog-page.ez-blog-studio .ez-blog-seal__link {
  display: inline-block;
  padding-block: 3px;
  min-height: 24px;
  font-weight: 600;
  color: var(--blog-navy);
  text-decoration: none;
}
/* El dorado vuelve aca en su unico papel admitido: un subrayado
   fino al pasar o al enfocar. Acento, no superficie. */
.ez-blog-page.ez-blog-studio .ez-blog-seal__link:hover,
.ez-blog-page.ez-blog-studio .ez-blog-seal__link:focus-visible {
  color: var(--blog-navy-deep);
  text-decoration: underline;
  text-decoration-color: var(--blog-gold-accent);
  text-underline-offset: 3px;
}

@media (max-width: 760px) {
  .ez-blog-page.ez-blog-studio .ez-blog-seal {
    padding-block: var(--sp-3);
  }
  .ez-blog-page.ez-blog-studio .ez-blog-seal .ez-section__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-2);
    text-align: left;
  }
  .ez-blog-page.ez-blog-studio .ez-blog-seal__heading h2 {
    margin-top: 2px;
  }
}

/* --- Boton "Ver mas": accion secundaria, en frio --------------
   Traia borde e hover dorados. Sigue siendo un contorno -no un
   boton navy lleno- para no competir con el CTA de cierre. */
.ez-blog-page.ez-blog-studio .ez-blog-mas-btn {
  background: var(--blog-white);
  border-color: #9fb3c8;
  color: var(--blog-navy);
}
.ez-blog-page.ez-blog-studio .ez-blog-mas-btn:hover {
  background: var(--blog-blue-mist);
  border-color: var(--blog-navy);
  color: var(--blog-navy);
}

/* --- CTA final: directo, sin la explicacion previa ------------
   El parrafo largo ("Tu caso se analiza en serio...") desaparecio
   del HTML; el padding baja para que el bloque no quede con aire
   de mas ahora que el texto es una linea. */
.ez-blog-page.ez-blog-studio .ez-cta-light {
  background: var(--blog-white);
  /* Dos lineas doradas de ancho completo caian aca a la vez:
     .ez-cta-light--border-top (2px, sistema) y otra de 1px del
     bloque de blog. El salto de azul niebla a blanco ya separa las
     dos secciones; no hace falta subrayarlo con dorado. */
  border-top: 0;
  padding-block: var(--sp-8);
}

/* Boton principal: era dorado lleno, el elemento que mas empujaba
   la pagina hacia lo calido. Pasa a navy institucional. */
.ez-blog-page.ez-blog-studio .ez-cta-light .ez-btn--primary {
  background: var(--blog-navy);
  border-color: var(--blog-navy);
  color: var(--blog-white);
  box-shadow: none;
}
.ez-blog-page.ez-blog-studio .ez-cta-light .ez-btn--primary:hover {
  background: var(--blog-navy-deep);
  border-color: var(--blog-navy-deep);
  color: var(--blog-white);
}

/* WhatsApp: contorno institucional, para que lea como accion
   secundaria y no como un segundo boton principal. */
.ez-blog-page.ez-blog-studio .ez-cta-light .ez-btn--whatsapp {
  background: var(--blog-white);
  border: 1px solid var(--blog-navy);
  color: var(--blog-navy);
  box-shadow: none;
}
.ez-blog-page.ez-blog-studio .ez-cta-light .ez-btn--whatsapp:hover {
  background: var(--blog-blue-mist);
  border-color: var(--blog-navy-deep);
  color: var(--blog-navy-deep);
}
@media (max-width: 760px) {
  .ez-blog-page.ez-blog-studio .ez-cta-light {
    padding-block: var(--sp-6);
  }
}

/* ============================================================
   Blanco tactil de "Leer articulo" (12/08/2026)
   ------------------------------------------------------------
   Los seis enlaces del pie de tarjeta median 101x14px. El texto
   es chico a proposito -es un remate editorial, no un boton- y
   asi se queda: lo que cambia es la caja que responde al dedo,
   no la tipografia.

   Con display:inline el alto del enlace lo fija la altura de
   linea del texto (14px) y ni el padding vertical lo agranda:
   un elemento inline no aporta alto a su contenedor. Pasarlo a
   inline-flex hace que min-height sea real. 24px es el minimo
   de WCAG 2.2 (2.5.8, Target Size Minimum).

   Por que no crece la tarjeta: .ez-blog-card__footer ya es un
   flex con align-items:center y su alto lo marca la fecha, que
   con su interlineado ya pasa de 24px. El enlace crece dentro
   de un renglon que ya era mas alto que el.
   ============================================================ */
.ez-blog-page.ez-blog-studio .ez-blog-card__link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* Mismo motivo, otro enlace: el titulo de la tarjeta. Cuando el
   texto entra en un solo renglon -pasa alrededor de 600px de ancho,
   con los tres titulos mas cortos- su caja mide 18px de alto. Con
   `display: block` el enlace ocupa el ancho del titular y min-height
   lo lleva a 24px. Solo crece el caso de un renglon: medido a 600px,
   esas tarjetas pasan de 269px a 271px y la pagina de 3042px a
   3049px. En los otros trece anchos el titulo ya ocupa dos renglones
   y la regla no cambia nada. */
.ez-blog-page.ez-blog-studio .ez-blog-card__title-link {
  display: block;
  min-height: 24px;
}