/* =========================================================
   BLOG TYPOGRAPHY SYSTEM (Elementor Post Content)
   Compatible with: Theme Post Content / Post Content widget
   ========================================================= */

:where(.elementor-widget-theme-post-content, .elementor-widget-post-content){
  /* Base text */
  --blog-text: "Sono", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --blog-head: "Newsreader", Georgia, "Times New Roman", serif;

  --blog-text-size: 14px;
  --blog-text-weight: 340;
  --blog-text-lh: 1.5em;
  --blog-word-spacing: 5px;

  /* Headings */
  --h2-size: clamp(28px, 2.6vw, 40px);
  --h3-size: 30px;
  --h4-size: 22px;

  --head-weight: 300;
  --head-lh: 1.2em;

  --h2-ls: -1px;
  --h3-ls: -1px;
  --h4-ls: -0.5px;

  /* Rhythm + colors */
  --text-color: #353537;
  --muted-color: rgba(53,53,55,.75);
  --rule-color: rgba(53,53,55,.18);

  --content-max: 720px; /* lectura cómoda */
  --space-1: .6em;
  --space-2: 1.1em;
  --space-3: 1.8em;
}

/* Optional: centrar y limitar ancho SOLO en el cuerpo del post */
:where(.elementor-widget-theme-post-content, .elementor-widget-post-content) .elementor-widget-container{
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}

/* -------------------------
   Paragraphs & basics
-------------------------- */
:where(.elementor-widget-theme-post-content, .elementor-widget-post-content) :where(p, li){
  font-family: var(--blog-text);
  font-size: var(--blog-text-size);
  font-weight: var(--blog-text-weight);
  line-height: var(--blog-text-lh);
  word-spacing: var(--blog-word-spacing);
  color: var(--text-color);
}

:where(.elementor-widget-theme-post-content, .elementor-widget-post-content) p{
  margin: 0 0 var(--space-2);
}

:where(.elementor-widget-theme-post-content, .elementor-widget-post-content) :where(ul, ol){
  margin: 0 0 var(--space-2);
  padding-left: 1.2em;
}

:where(.elementor-widget-theme-post-content, .elementor-widget-post-content) li{
  margin: 0 0 .4em;
}

/* -------------------------
   Headings
-------------------------- */
:where(.elementor-widget-theme-post-content, .elementor-widget-post-content) h2{
  font-family: var(--blog-head);
  font-size: var(--h2-size);
  font-style: italic;
  font-weight: var(--head-weight);
  line-height: var(--head-lh);
  letter-spacing: var(--h2-ls);
  color: var(--text-color);
  margin: var(--space-3) 0 var(--space-1);
}

:where(.elementor-widget-theme-post-content, .elementor-widget-post-content) h3{
  font-family: var(--blog-head);
  font-size: var(--h3-size);
  font-style: normal;
  font-weight: var(--head-weight);
  line-height: var(--head-lh);
  letter-spacing: var(--h3-ls);
  color: var(--text-color);
  margin: var(--space-3) 0 var(--space-1);
}

:where(.elementor-widget-theme-post-content, .elementor-widget-post-content) h4{
  font-family: var(--blog-head);
  font-size: var(--h4-size);
  font-style: italic;
  font-weight: var(--head-weight);
  line-height: var(--head-lh);
  letter-spacing: var(--h4-ls);
  color: var(--text-color);
  margin: var(--space-2) 0 var(--space-1);
}

/* -------------------------
   Links (base)
   - mantiene tu animación de línea
   - compatible con links en párrafos y headings
-------------------------- */
:where(.elementor-widget-theme-post-content, .elementor-widget-post-content) a{
  color: var(--text-color);
  text-decoration: none;
  text-underline-offset: .12em;
  font-weight:500;
  color:#000;
  
}

/* Tu clase exacta (limpia y sin cambios de diseño) */
:where(.elementor-widget-theme-post-content, .elementor-widget-post-content) .heading-line-hover-ltr-black{
  position: relative;
  display: inline-block; /* underline fits text width */
}

:where(.elementor-widget-theme-post-content, .elementor-widget-post-content) .heading-line-hover-ltr-black::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.05em;
  width: 100%;
  height: 1px;
  background: #000;

  /* 👇 antes estaba en 0 */
  transform: scaleX(1);
  transform-origin: left;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
}

:where(.elementor-widget-theme-post-content, .elementor-widget-post-content) .heading-line-hover-ltr-black:hover::after{
  /* 👇 antes era 1 */
  transform: scaleX(0);
}


/* Extra útil: si NO quieres poner la clase manualmente en cada link,
   puedes activar esto (opcional). 
   Aplica la línea a links dentro de p/li, excluyendo botones/anchors comunes de Elementor. */

:where(.elementor-widget-theme-post-content, .elementor-widget-post-content) :where(p, li) a:not(.elementor-button):not([class*="button"]){
  position: relative;
  display: inline-block;
}

:where(.elementor-widget-theme-post-content, .elementor-widget-post-content) :where(p, li) a:not(.elementor-button):not([class*="button"])::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-0.05em;
  width:100%;
  height:1px;
  background:#000;

  /* 👇 antes estaba en 0 */
  transform:scaleX(1);
  transform-origin:left;
  transition:transform .6s cubic-bezier(.4,0,.2,1);
}

:where(.elementor-widget-theme-post-content, .elementor-widget-post-content) :where(p, li) a:not(.elementor-button):not([class*="button"]):hover::after{
  /* 👇 antes era 1 */
  transform:scaleX(0);
}


/* -------------------------
   Blockquotes
-------------------------- */
:where(.elementor-widget-theme-post-content, .elementor-widget-post-content) blockquote{
  margin: var(--space-3) 0;
  padding: .9em 1.1em;
  border-left: 2px solid var(--rule-color);
  color: var(--muted-color);
}

:where(.elementor-widget-theme-post-content, .elementor-widget-post-content) blockquote p{
  margin: 0;
  color: var(--muted-color);
}

/* -------------------------
   Images + captions
-------------------------- */
:where(.elementor-widget-theme-post-content, .elementor-widget-post-content) :where(img, figure){
  max-width: 100%;
  height: auto;
}

:where(.elementor-widget-theme-post-content, .elementor-widget-post-content) figure{
  margin: var(--space-3) 0;
}

:where(.elementor-widget-theme-post-content, .elementor-widget-post-content) figcaption{
  margin-top: .6em;
  font-family: var(--blog-text);
  font-size: 13px;
  font-weight: 340;
  line-height: 1.4em;
  word-spacing: 2px; /* más sutil para captions */
  color: var(--muted-color);
}

/* -------------------------
   HR + separators
-------------------------- */
:where(.elementor-widget-theme-post-content, .elementor-widget-post-content) hr{
  border: 0;
  height: 1px;
  background: var(--rule-color);
  margin: var(--space-3) 0;
}

/* -------------------------
   Code (inline + blocks)
-------------------------- */
:where(.elementor-widget-theme-post-content, .elementor-widget-post-content) :where(code, kbd, samp){
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .92em;
}

:where(.elementor-widget-theme-post-content, .elementor-widget-post-content) code{
  padding: .15em .35em;
  border: 1px solid var(--rule-color);
  border-radius: 6px;
}

:where(.elementor-widget-theme-post-content, .elementor-widget-post-content) pre{
  overflow: auto;
  padding: 1em 1.1em;
  border: 1px solid var(--rule-color);
  border-radius: 12px;
  margin: var(--space-3) 0;
}

:where(.elementor-widget-theme-post-content, .elementor-widget-post-content) pre code{
  padding: 0;
  border: 0;
  border-radius: 0;
}

/* -------------------------
   Tables (si las usas en posts)
-------------------------- */
:where(.elementor-widget-theme-post-content, .elementor-widget-post-content) table{
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-3) 0;
  font-family: var(--blog-text);
  font-size: 15px;
  font-weight: 340;
  line-height: 1.45em;
  word-spacing: 3px;
}

:where(.elementor-widget-theme-post-content, .elementor-widget-post-content) :where(th, td){
  padding: .75em .8em;
  border-bottom: 1px solid var(--rule-color);
  vertical-align: top;
}

:where(.elementor-widget-theme-post-content, .elementor-widget-post-content) th{
  font-family: var(--blog-head);
  font-weight: 375;
  letter-spacing: -.5px;
}

/* -------------------------
   Mobile polish
-------------------------- */
@media (max-width: 767px){
  :where(.elementor-widget-theme-post-content, .elementor-widget-post-content){
    --content-max: 92vw;
    --blog-word-spacing: 3px; /* 5px en móvil puede verse “separado” */
    --h3-size: 26px;
    --h4-size: 20px;
  }
}