/* =====================================================================
   lmg-wp.css — Integración con WordPress / Elementor / Hello Elementor.
   Neutraliza lo que el kit global de Elementor del sitio (colores, tipografías,
   botones, márgenes de widgets) aplicaría sobre las páginas del libro.
   Todo lleva el prefijo body.lmg-page para no tocar el resto del sitio.
   ===================================================================== */

/* Contenedores de Elementor: sin márgenes ni huecos entre secciones */
body.lmg-page .elementor-widget:not(:last-child){margin-block-end:0;margin-bottom:0;}
body.lmg-page .elementor-widget-container{line-height:inherit;}
body.lmg-page .e-con{--padding-top:0;--padding-bottom:0;--padding-left:0;--padding-right:0;--margin-top:0;--margin-bottom:0;--flex-gap:0;--gap:0;--row-gap:0;--column-gap:0;}
body.lmg-page .e-con > .e-con-inner{max-width:none;padding:0;}
/* Los widgets propios traen su propio .wrap y su propio aire, asi que en SUS
   secciones (.lmg-wsec) el contenedor no debe limitar ni la columna meter
   relleno. En las secciones despiezadas no se toca nada: alli el ancho y el
   relleno se cambian desde el panel de Elementor, como en cualquier pagina. */
body.lmg-page .lmg-wsec > .elementor-container{max-width:none;}
body.lmg-page .lmg-wsec .elementor-element-populated{padding:0;}
body.lmg-page .elementor{overflow:visible;}

/* ---------------------------------------------------------------------
   El kit global del sitio (.elementor-kit-NN, que vive en <body>) fija
   tipografía heredable: familia, tamaño, peso, estilo, interlínea y, sobre
   todo, letter-spacing:1px. Eso se heredaba a cada párrafo, lista y botón
   del libro y ensanchaba el texto un 7%: los saltos de línea no coincidían
   con el diseño y cada bloque crecía de alto. Aquí se devuelve todo al
   valor del diseño. body.lmg-page (0,1,1) gana a .elementor-kit-NN (0,1,0);
   body.lmg-page h2 (0,1,2) gana a .elementor-kit-NN h2 (0,1,1).
   --------------------------------------------------------------------- */
body.lmg-page{
  letter-spacing:normal;word-spacing:normal;
  font-style:normal;font-weight:400;text-decoration:none;text-transform:none;
  font-family:var(--font-body);font-size:16px;line-height:1.6;color:var(--ink);
}
body.lmg-page h1,body.lmg-page h2,body.lmg-page h3,
body.lmg-page h4,body.lmg-page h5,body.lmg-page h6{
  letter-spacing:normal;text-transform:none;font-style:normal;text-decoration:none;
  font-family:var(--font-display);font-weight:700;line-height:1.08;color:var(--ink);
}
/* h1 y h2 van en Marykate, la letra del título del libro, igual que en el
   diseño. Esta regla tiene que repetirse aquí porque la del kit del sitio
   pesa más que la del diseño y había que subir de especificidad. */
body.lmg-page h1,body.lmg-page h2{
  font-family:var(--font-title);font-weight:400;font-synthesis:none;letter-spacing:.012em;
}
/* Sin clase, los encabezados vuelven al tamaño del navegador, que es lo que
   usa el sitio estático. Con clase mandan components.css o el panel. */
body.lmg-page h1{font-size:2em;}
body.lmg-page h2{font-size:1.5em;}
body.lmg-page h3{font-size:1.17em;}
body.lmg-page h4{font-size:1em;}
body.lmg-page h5{font-size:.83em;}
body.lmg-page h6{font-size:.67em;}
html body.lmg-page .elementor-button,
html body.lmg-page button,
html body.lmg-page input[type="button"],
html body.lmg-page input[type="submit"]{
  letter-spacing:normal;font-style:normal;text-transform:none;text-decoration:none;
}

/* El kit fija tipografías y colores en encabezados, enlaces y botones */
body.lmg-page h1,body.lmg-page h2,body.lmg-page h3,body.lmg-page h4{margin:0;padding:0;}
body.lmg-page a{text-decoration:none;}
body.lmg-page a:hover,body.lmg-page a:focus{text-decoration:none;}

/* El kit del sitio cambia el color de los enlaces al pasar el ratón, y eso
   apagaba el texto de los botones (quedaba en un rojo apagado). Se fija el
   color en todos los estados, incluido el <span> del precio. */
body.lmg-page .btn--primary,body.lmg-page .btn--primary:hover,body.lmg-page .btn--primary:focus,body.lmg-page .btn--primary:active,
body.lmg-page .btn--ink,body.lmg-page .btn--ink:hover,body.lmg-page .btn--ink:focus,
body.lmg-page .btn--mint,body.lmg-page .btn--mint:hover,body.lmg-page .btn--mint:focus{color:#fff;}
body.lmg-page .btn--primary:hover .price,body.lmg-page .btn--primary:focus .price{opacity:1;color:#fff;}
body.lmg-page .btn--outline,body.lmg-page .btn--outline:hover,body.lmg-page .btn--outline:focus,
body.lmg-page .btn--light,body.lmg-page .btn--light:hover,body.lmg-page .btn--light:focus{color:var(--ink);}
body.lmg-page .link-arrow,body.lmg-page .link-arrow:hover,body.lmg-page .link-arrow:focus{color:var(--coral-dark);}
/* El reset del sitio pone white-space:nowrap en todos los botones. Las
   preguntas del acordeón son botones: se salían de la tarjeta en vez de
   partirse en dos líneas. Los botones del diseño (.btn) mantienen su nowrap,
   que pesa más que esta regla. */
body.lmg-page button{font-family:inherit;text-transform:none;letter-spacing:normal;box-shadow:none;white-space:normal;}
body.lmg-page input,body.lmg-page select,body.lmg-page textarea{font-family:inherit;box-shadow:none;}
/* El tema y WooCommerce dan a las etiquetas y a los <legend> una interlínea
   propia; en el diseño heredan la del cuerpo. Sin esto cada campo del
   formulario salía ocho píxeles más bajo. */
body.lmg-page label,body.lmg-page legend,body.lmg-page fieldset{
  line-height:inherit;
}
/* Texto solo para lectores de pantalla: tiene que ocupar un píxel de verdad.
   El <legend> del tema traía alto propio y empujaba el formulario. */
body.lmg-page .vh{
  position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;overflow:hidden!important;
  clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important;
}
body.lmg-page ul,body.lmg-page ol{margin:0;padding:0;}
body.lmg-page p{margin:0;}
/* .elementor-widget-wrap es un contenedor flex, y en flex los márgenes no
   colapsan. En el sitio estático el margen inferior del último párrafo y el
   margen superior del bloque siguiente se funden en uno solo; aquí se
   sumaban y cada bloque bajaba de más. El aire entre bloques lo pone el
   margen del widget (panel de Elementor), no la cola del párrafo. */
body.lmg-page .elementor-widget-text-editor > .elementor-widget-container > p:last-child{margin-bottom:0;}
body.lmg-page img{max-width:100%;height:auto;}
/* Elementor pone a cero el margen de cualquier <figure> dentro de sus widgets,
   con una regla que pesa más que las utilidades de aire del diseño (.mt-3 y
   compañía). Aquí se devuelven, solo dentro del libro. */
body.lmg-page .elementor .elementor-widget figure.mt-1{margin-top:12px;}
body.lmg-page .elementor .elementor-widget figure.mt-2{margin-top:24px;}
body.lmg-page .elementor .elementor-widget figure.mt-3{margin-top:40px;}
body.lmg-page .elementor .elementor-widget figure.mt-4{margin-top:56px;}

/* Hello Elementor: el <main> y el contenedor de página no deben añadir aire */
body.lmg-page .site-main,body.lmg-page main#content,body.lmg-page .page-content{padding:0;margin:0;max-width:none;}
body.lmg-page .site-main > .page-header{display:none;}
body.lmg-page.elementor-page .site-main{padding:0;}

/* Cabecera del libro dentro de la plantilla de Elementor (Theme Builder o Canvas) */
body.lmg-page [data-elementor-type="header"]{position:relative;z-index:100;}
body.lmg-page [data-elementor-type="header"] .lmg-header{position:fixed;}
body.lmg-page .elementor-location-header{display:block;}

/* Barra de admin de WordPress: el header fijo baja lo mismo que la barra */
body.lmg-page.admin-bar .lmg-header{top:32px;}
@media (max-width:782px){body.lmg-page.admin-bar .lmg-header{top:46px;}}
body.lmg-page.admin-bar .mobile-menu{top:32px;}

/* En el editor de Elementor: todo visible y sin sticky de 340vh */
body.lmg-page.elementor-editor-active .reveal,body.lmg-page.elementor-editor-preview .reveal{opacity:1;transform:none;}
body.lmg-page.elementor-editor-active .lmg-header{position:relative;}
body.lmg-page.elementor-editor-active .buy-bar{display:none;}

/* Avisos de WooCommerce (añadido al carrito) con el estilo del libro */
body.lmg-page .woocommerce-message,body.lmg-page .woocommerce-error,body.lmg-page .woocommerce-info{
  border:0;border-radius:14px;background:var(--paper);box-shadow:var(--shadow-xs);padding:14px 18px;margin:0 0 18px;
  font-weight:700;color:var(--ink);list-style:none;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;
}
body.lmg-page .woocommerce-message::before,body.lmg-page .woocommerce-error::before,body.lmg-page .woocommerce-info::before{display:none;}
body.lmg-page .woocommerce-message .button{order:2;font-family:var(--font-body);font-weight:800;background:var(--mint-dark);color:#fff;border-radius:999px;padding:10px 18px;}
body.lmg-page .woocommerce-error{border-left:5px solid var(--coral);}