/* ------------------------------------------------------------------
   Secciones montadas con widgets NATIVOS de Elementor.

   Aquí solo queda lo que el panel de Elementor NO sabe expresar: puntos
   decorativos, resaltados dentro de un titular, giros y solapes. Todo lo
   demás (color, tipografía, fondo, relleno, radio, sombra y márgenes)
   vive en los ajustes de cada widget, así que se ve y se cambia desde el
   panel. Si algo se puede poner en el panel, no debe estar en este archivo:
   duplicarlo aquí haría que los dos valores se separen con el tiempo.
   ------------------------------------------------------------------ */

/* Píldoras y etiquetas: se ajustan a su texto en vez de ocupar la fila.
   Elementor no tiene un control para esto en el widget Título. */
.lmg-page .lmg-eyebrow,
.lmg-page .lmg-tag{width:fit-content;}
/* La cápsula se ajusta al texto y a nada más. Sin esto, el contenedor del
   widget es un bloque y su altura la marca la línea base del cuerpo (16px),
   no la del rótulo (12,5px): la cápsula salía cinco píxeles más alta. */
.lmg-page .lmg-eyebrow > .elementor-widget-container,
.lmg-page .lmg-eyebrow-light > .elementor-widget-container,
.lmg-page .lmg-tag > .elementor-widget-container{display:flex;}

/* El punto de color delante del texto. */
.lmg-page .lmg-eyebrow .elementor-heading-title,
.lmg-page .lmg-tag .elementor-heading-title{display:inline-flex;align-items:center;gap:8px;}
.lmg-page .lmg-eyebrow .elementor-heading-title::before{
  content:"";flex:none;width:6px;height:6px;border-radius:50%;
  background:var(--e-global-color-lmg_coral, #E8776B);
}
.lmg-page .lmg-tag .elementor-heading-title::before{
  content:"";flex:none;width:10px;height:10px;border-radius:50%;
  background:var(--e-global-color-lmg_mint, #6FBFA6);
}
.lmg-page .lmg-tag--coral .elementor-heading-title::before{
  background:var(--e-global-color-lmg_coral, #E8776B);
}
.lmg-page .lmg-eyebrow--mint .elementor-heading-title::before{
  background:var(--e-global-color-lmg_mint, #6FBFA6);
}

/* Resaltado coral dentro de un titular: va en el HTML del campo, no es
   un control aparte. */
.lmg-page .lmg-title .mark{display:inline;color:var(--e-global-color-lmg_coral_dark, #CE5B4E);}

/* La flecha se separa al pasar el ratón. */
.lmg-page .lmg-arrow .elementor-button{border:0;box-shadow:none;transition:gap .2s ease-out;}
.lmg-page .lmg-arrow .elementor-button:hover{gap:4px;}

/* Composición de la sección "demasiado sano": giros y solape. */
.lmg-page .lmg-media{position:relative;}
.lmg-page .lmg-media .lmg-card{width:78%;transform:rotate(-3deg);}
.lmg-page .lmg-plate{position:absolute;right:-2%;bottom:0;width:62%;z-index:2;transform:rotate(3deg);}
.lmg-page .lmg-plate img{filter:drop-shadow(0 20px 24px rgba(58,46,38,0.25));}
.lmg-page .lmg-tag-a{position:absolute;left:4%;top:-16px;z-index:3;transform:rotate(-3deg);}
.lmg-page .lmg-tag-b{position:absolute;right:6%;bottom:6%;z-index:3;}

/* Rótulo claro, para la caja oscura. */
.lmg-page .lmg-eyebrow-light{width:fit-content;}
.lmg-page .lmg-hero-cta{width:auto;}
.lmg-page .lmg-eyebrow-light .elementor-heading-title{display:inline-flex;align-items:center;gap:8px;}
.lmg-page .lmg-eyebrow-light .elementor-heading-title::before{
  content:"";flex:none;width:6px;height:6px;border-radius:50%;
  background:var(--butter, #F3CB6B);
}

/* Los halos de color de la caja: decoración, no hay control para esto. */
.lmg-page .lmg-leadbox{overflow:hidden;}
.lmg-page .lmg-leadbox::before,
.lmg-page .lmg-leadbox::after{content:"";position:absolute;border-radius:50%;pointer-events:none;}
.lmg-page .lmg-leadbox::before{right:-60px;top:-60px;width:240px;height:240px;background:radial-gradient(circle, rgba(232,119,107,0.4), transparent 70%);}
.lmg-page .lmg-leadbox::after{left:-40px;bottom:-80px;width:200px;height:200px;background:radial-gradient(circle, rgba(111,191,166,0.28), transparent 70%);}
.lmg-page .lmg-leadbox > .elementor-container{position:relative;z-index:1;}


/* Titular centrado: el control de alineación centra el texto, pero la píldora
   del rótulo es un bloque y hay que centrarla como caja. */
.lmg-page .lmg-center{margin-left:auto;margin-right:auto;}

/* Tarjetas de «Para quién es». El fondo, el radio, el relleno y la sombra
   viven en los ajustes de la columna. Aquí solo queda lo que el panel no
   expresa: la animación al pasar el ratón y el encaje de la ilustración. */
.lmg-page .lmg-aud-card > .elementor-element-populated{
  transition:transform .35s ease-out, box-shadow .35s ease;
}
.lmg-page .lmg-aud-card > .elementor-element-populated:hover{
  transform:translateY(-5px);box-shadow:0 10px 24px -12px rgba(58,46,38,0.28);
}
.lmg-page .lmg-aud-art .elementor-widget-container{
  height:190px;box-sizing:border-box;
  display:flex;align-items:flex-end;justify-content:center;overflow:hidden;
}
.lmg-page .lmg-aud-art img{max-height:100%;width:auto;object-fit:contain;object-position:bottom;}
.lmg-page .lmg-aud-art--cover img{
  width:100%;height:100%;object-fit:cover;border-radius:12px 12px 0 0;
}
.lmg-page .lmg-aud-art--alto img{object-position:50% 30%;}
/* El enlace se pega abajo para que las tarjetas queden alineadas. */

/* La autora: la pegatina y el logo van montados sobre el retrato. Su color,
   su tipografia y su redondeo estan en el panel; aqui solo la posicion. */
.lmg-page .lmg-author-portrait > .elementor-element-populated{position:relative;}
.lmg-page .lmg-author-sticker{
  position:absolute;right:-10px;top:22px;width:108px;z-index:2;transform:rotate(8deg);
}
.lmg-page .lmg-author-sticker .elementor-widget-container{
  display:grid;place-items:center;aspect-ratio:1;
}
.lmg-page .lmg-author-logo{position:absolute;left:-14px;bottom:26px;z-index:2;}
.lmg-page .lmg-author-logo .elementor-widget-container{display:inline-block;}

/* La mesa: la veta de la madera. El tono y el redondeo estan en el panel. */
.lmg-page .lmg-table{position:relative;overflow:hidden;}
.lmg-page .lmg-table::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 140% at 50% -10%, rgba(255,255,255,0.5), transparent 60%),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.035) 0 2px, transparent 2px 26px);
}
.lmg-page .lmg-table > .elementor-container{position:relative;z-index:1;}

/* Plato: el marco de puntos interior y la animacion al pasar el raton. */
.lmg-page .lmg-dish > .elementor-element-populated{
  position:relative;transition:transform .35s ease-out, box-shadow .35s ease;
}
.lmg-page .lmg-dish > .elementor-element-populated::before{
  content:"";position:absolute;inset:10px;pointer-events:none;
  border:2px dashed rgba(58,46,38,0.14);border-radius:18px;
}
.lmg-page .lmg-dish > .elementor-element-populated:hover{
  transform:translateY(-6px);box-shadow:0 26px 36px -14px rgba(0,0,0,0.4);
}
.lmg-page .lmg-dish-art img{width:auto;max-width:100%;margin:0 auto;transition:transform .5s ease-out;}
.lmg-page .lmg-dish > .elementor-element-populated:hover .lmg-dish-art img{transform:scale(1.05) rotate(-2deg);}
.lmg-page .lmg-dish-eyebrow .elementor-heading-title{letter-spacing:.12em;text-transform:uppercase;}

/* Tarjetas en columna: el enlace se pega abajo para que todas queden a la par.
   .elementor-widget-wrap y .elementor-element-populated son el mismo nodo. */
.lmg-page .lmg-dish > .elementor-element-populated,
.lmg-page .lmg-aud-card > .elementor-element-populated{flex-direction:column;flex-wrap:nowrap;}
.lmg-page .lmg-dish > .elementor-element-populated > .lmg-arrow,
.lmg-page .lmg-aud-card > .elementor-element-populated > .lmg-arrow{margin-top:auto;}

/* Que es este libro: la tarima lleva el grano de papel y el aro de las cifras
   su propio borde, asi que la lista pierde el suyo. */
.lmg-page .lmg-about-media > .elementor-element-populated{position:relative;overflow:visible;}
.lmg-page .lmg-about-media > .elementor-element-populated::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background-image:var(--grain);background-size:200px 200px;mix-blend-mode:multiply;opacity:.2;
}
.lmg-page .lmg-about-img{position:relative;z-index:1;}
.lmg-page .lmg-about-img img{max-width:none;filter:drop-shadow(0 22px 26px rgba(58,46,38,0.22));}
.lmg-page .elementor-widget-lmg-stats .stats{margin-top:0;padding-top:0;border-top:0;}

/* Hero. El titular, el subtitulo y los botones son widgets: su tipografia y
   sus colores estan en el panel. Aqui solo la altura de la seccion, el
   subrayado a crayon y el encaje del libro en 3D. */
.lmg-page .lmg-hero-sec{min-height:100svh;display:flex;align-items:center;overflow:hidden;}
.lmg-page .lmg-hero-sec > .elementor-container{width:100%;}
.lmg-page .lmg-h1 .elementor-heading-title{letter-spacing:-.018em;max-width:11ch;}
.lmg-page .lmg-hero-sub p{max-width:46ch;}
.lmg-page .lmg-hero-art-col .hero__art{max-width:560px;}

/* Subrayado a crayon sin SVG: el trazo va como mascara, asi el titular
   puede seguir siendo un widget Titulo de Elementor. */
.lmg-page .lmg-crayon{position:relative;display:inline-block;white-space:nowrap;}
.lmg-page .lmg-crayon::after{
  content:"";position:absolute;left:-.04em;right:-.12em;bottom:-.14em;height:.32em;
  background:var(--butter-dark, #D9A62F);opacity:.9;pointer-events:none;
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M4 13c58-7 122-9 186-6 41 2 76 5 106 9' fill='none' stroke='%23000' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M4 13c58-7 122-9 186-6 41 2 76 5 106 9' fill='none' stroke='%23000' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  clip-path:inset(0 100% 0 0);transition:clip-path .7s ease-out .1s;
}
.lmg-page .lmg-crayon.is-drawn::after{clip-path:inset(0 0 0 0);}
@media (prefers-reduced-motion: reduce){
  .lmg-page .lmg-crayon::after{clip-path:inset(0 0 0 0);transition:none;}
}

/* Los dos botones del hero comparten fila. */
.lmg-page .lmg-hero-copy > .elementor-element-populated{align-items:flex-start;}

/* Secciones mixtas: el bloque interactivo trae su propia <section> con aire y
   su .wrap con ancho. Aqui ya lo pone la seccion de Elementor, asi que dentro
   se neutralizan; el aire y el ancho se cambian desde el panel. */
.lmg-page .lmg-mixta .section{padding:0;}
.lmg-page .lmg-mixta .wrap{max-width:none;padding:0;width:100%;}

/* ---------- Cabecera ----------
   La marca, el menu, el boton y el menu movil son piezas sueltas: sus colores,
   su tipografia y su aire se cambian en el panel. Aqui queda la barra fija, la
   disposicion de las tres columnas y el corte de movil. */
.lmg-page .lmg-header-sec{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .35s ease, box-shadow .35s ease, padding .35s ease;
}
.lmg-page .lmg-header-sec.is-scrolled{
  background:rgba(251,246,236,0.92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 8px 24px -16px rgba(58,46,38,0.35);
}
.lmg-page .lmg-header-sec > .elementor-container{align-items:center;}
.lmg-page .lmg-nav-col > .elementor-element-populated{align-items:center;}
.lmg-page .lmg-acciones-col > .elementor-element-populated{flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:12px;}
.lmg-page .lmg-acciones-col .elementor-element{width:auto;}

/* La marca: el enlace del widget Titulo hace de contenedor. */
.lmg-page .lmg-brand .elementor-heading-title > a,
.lmg-page .lmg-brand .elementor-heading-title{display:flex;align-items:center;gap:12px;color:inherit;line-height:1;}

/* El menu de Elementor y el de WordPress comparten el aspecto del diseño. */
.lmg-page .lmg-nav ul{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0;}
.lmg-page .lmg-nav a{
  font-weight:700;font-size:15px;opacity:.82;position:relative;padding:4px 0;
  color:var(--ink);transition:opacity .2s ease;
}
.lmg-page .lmg-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;border-radius:2px;
  background:var(--butter);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .3s var(--ease-out);
}
.lmg-page .lmg-nav a:hover,
.lmg-page .lmg-nav .current-menu-item > a{opacity:1;}
.lmg-page .lmg-nav a:hover::after,
.lmg-page .lmg-nav .current-menu-item > a::after{transform:scaleX(1);}
.lmg-page .lmg-nav .elementor-nav-menu--main .elementor-item{padding:4px 0;}

.lmg-page .lmg-burger{display:none;}
@media (max-width:859px){
  .lmg-page .lmg-nav-col{display:none;}
  .lmg-page .lmg-burger{display:block;}
  .lmg-page .lmg-header-cta{display:none;}
}

/* ---------- Pie ---------- */
.lmg-page .lmg-footer-menu ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.lmg-page .lmg-footer-menu a{font-weight:700;font-size:14.5px;color:var(--ink);transition:color .2s ease;}
.lmg-page .lmg-footer-menu a:hover{color:var(--coral-dark);}
.lmg-page .lmg-footer-menu .elementor-nav-menu--main .elementor-item{padding:0;}
.lmg-page .lmg-footer-title .elementor-heading-title{letter-spacing:.12em;text-transform:uppercase;}
.lmg-page .lmg-footer-tag p{max-width:34ch;}
.lmg-page .lmg-footer-bottom a{color:inherit;}
.lmg-page .lmg-footer-bottom a:hover{color:var(--coral-dark);}
@media (max-width:859px){
  .lmg-page .lmg-footer-bottom .elementor-text-editor{text-align:left;}
}

/* Rejillas de tarjetas: el hueco sale del reparto, porque el relleno de la
   columna ya es el relleno de la tarjeta y no puede hacer las dos cosas. */
.lmg-page .lmg-cards > .elementor-container{justify-content:space-between;}

/* El plato del medio sube, como en el diseño. */
@media (min-width:900px){
  .lmg-page .lmg-table > .elementor-container > .elementor-column:nth-child(2) > .elementor-element-populated{
    transform:translateY(-16px);
  }
  .lmg-page .lmg-table > .elementor-container > .elementor-column:nth-child(2) > .elementor-element-populated:hover{
    transform:translateY(-22px);
  }
}

/* Las ilustraciones asoman por los bordes sin crear scroll horizontal.
   clip y no hidden, para no romper los sticky de dentro. */
.lmg-page .lmg-sec{overflow-x:clip;}

/* «Comer de temporada»: el tinte cubre el ancho de la ventana y cambia con la
   estacion elegida, asi que lo pone el CSS y no el panel. */
.lmg-page .lmg-mixta .seasons{background:transparent;}
.lmg-page .lmg-seasons-sec{--season-bg:var(--cream-2);background:var(--season-bg);transition:background .7s ease;}
.lmg-page .lmg-seasons-sec:has([data-season="primavera"]){--season-bg:#FBEFEF;}
.lmg-page .lmg-seasons-sec:has([data-season="verano"]){--season-bg:var(--sky-light);}
.lmg-page .lmg-seasons-sec:has([data-season="otono"]){--season-bg:#FBEEDC;}
.lmg-page .lmg-seasons-sec:has([data-season="invierno"]){--season-bg:var(--cream-2);}

/* Ilustraciones que asoman por los bordes. El tamaño y la posicion estan en el
   panel; aqui solo el giro y que no atrapen el raton. */
.lmg-page .lmg-peek{pointer-events:none;z-index:0;}
.lmg-page .lmg-peek img{filter:drop-shadow(0 14px 18px rgba(58,46,38,0.18));}
.lmg-page .lmg-peek--l img{transform:rotate(-28deg);}
.lmg-page .lmg-peek--r img{transform:rotate(18deg);}

/* «Alineacion vertical: en medio» del panel centra los widgets dentro de la
   columna, pero no las columnas entre si. Esto ultimo es lo que hace falta
   cuando una columna es mas alta que la otra. */
.lmg-page .elementor-section-content-middle > .elementor-container{align-items:center;}

/* El retrato de la autora no pasa de 380 px y va centrado en su columna, como
   en el diseño; la pegatina y el logo se cuelgan de ese ancho. */
/* El retrato mide 380 px y se centra en su columna. Elementor escribe el
   margen de la columna desde el panel y ahí no existe «auto», así que el
   centrado va aquí, con la especificidad justa para ganarle. */
.lmg-page .elementor .elementor-element.lmg-author-portrait > .elementor-element-populated{
  max-width:380px;margin-inline:auto;
}

/* Las ilustraciones que asoman se cuelgan del ancho de la ventana, no de la
   caja de contenido: dentro de una seccion mixta la <section> del widget deja
   de ser el ancla y lo pasa a ser la seccion de Elementor, que va a sangre. */
.lmg-page .lmg-mixta .section,
.lmg-page .lmg-mixta > .elementor-container:has(.peek),
.lmg-page .lmg-mixta .elementor-column:has(.peek),
.lmg-page .lmg-mixta .elementor-element-populated:has(.peek),
.lmg-page .lmg-mixta .elementor-widget:has(.peek),
.lmg-page .lmg-mixta .elementor-widget-container:has(.peek){position:static;}

/* El festoneado de mantel marca el cambio de color entre secciones, asi que va
   a sangre y pegado al borde de abajo. */
.lmg-page .lmg-sec .cloth-divider{
  position:absolute;left:50%;bottom:0;width:100vw;transform:translateX(-50%);
}
.lmg-page .lmg-sec .cloth-divider--flip{transform:translateX(-50%) rotate(180deg);}
.lmg-page .lmg-sec:has(> .elementor-container .cloth-divider){position:relative;}

/* ---------- Movil ----------
   Elementor apila las columnas por debajo de 768. En la cabecera eso dejaba el
   boton de menu en una segunda fila y hacia la barra 40 px mas alta. */
@media (max-width:767px){
  .lmg-page .lmg-header-sec > .elementor-container{flex-wrap:nowrap;align-items:center;}
  .lmg-page .lmg-brand-col{width:auto;flex:1 1 auto;}
  .lmg-page .lmg-acciones-col{width:auto;flex:0 0 auto;}
  .lmg-page .lmg-acciones-col > .elementor-element-populated{justify-content:flex-end;}

  /* El festoneado a sangre no cabe con el ancho de la ventana en movil. */
  .lmg-page .lmg-sec .cloth-divider{width:100%;left:0;transform:none;}
  .lmg-page .lmg-sec .cloth-divider--flip{transform:rotate(180deg);}
}

@media (max-width:767px){
  /* En movil el hero deja de ocupar la pantalla entera y el boton va a todo lo ancho. */
  .lmg-page .lmg-hero-sec{min-height:auto;}
  .lmg-page .lmg-hero-cta{width:100%;}
  .lmg-page .lmg-hero-cta .btn{width:100%;}
}

/* ---------------------------------------------------------------------
   Animaciones de entrada en las secciones despiezadas.

   En el sitio estático el hero usa el atributo [data-enter] y las rejillas
   [data-stagger]. Un widget de Elementor no puede llevar un atributo suelto
   sin Elementor Pro, así que aquí van las mismas reglas atadas a una clase,
   que sí se escribe desde el panel (Avanzado → Clases CSS).
   --------------------------------------------------------------------- */
.lmg-page .lmg-enter{opacity:0;transform:translateY(18px);animation:enter .85s var(--ease-out) forwards;}
.lmg-page .lmg-enter--1{animation-delay:.05s;}
.lmg-page .lmg-enter--2{animation-delay:.18s;}
.lmg-page .lmg-enter--3{animation-delay:.3s;}
.lmg-page .lmg-enter--4{animation-delay:.42s;}
.lmg-page .lmg-enter--5{animation-delay:.54s;}
.lmg-page .lmg-enter--art{animation-delay:.2s;animation-duration:1.1s;}

/* Las tarjetas de una rejilla entran una detrás de otra. */
.lmg-page .lmg-stagger > .elementor-container > .reveal:nth-child(2){transition-delay:.1s;}
.lmg-page .lmg-stagger > .elementor-container > .reveal:nth-child(3){transition-delay:.2s;}
.lmg-page .lmg-stagger > .elementor-container > .reveal:nth-child(4){transition-delay:.3s;}
.lmg-page .lmg-stagger > .elementor-container > .reveal:nth-child(5){transition-delay:.4s;}
.lmg-page .lmg-stagger > .elementor-container > .reveal:nth-child(6){transition-delay:.5s;}

/* En el editor no se anima nada: todo tiene que verse para poder tocarlo. */
.lmg-page.elementor-editor-active .lmg-enter,
.lmg-page.elementor-editor-preview .lmg-enter{opacity:1;transform:none;animation:none;}
@media (prefers-reduced-motion: reduce){
  .lmg-page .lmg-enter{opacity:1;transform:none;animation:none;}
}

/* ---------------------------------------------------------------------
   Divisor de mantel a sangre.

   En el diseño es un <div> entre dos secciones, del ancho de la ventana.
   Aquí es una sección de Elementor a la que el CSS le recorta el borde
   festoneado; el color y el alto se cambian desde el panel.
   --------------------------------------------------------------------- */
.lmg-page .lmg-cloth{
  position:relative;z-index:2;
  -webkit-mask:radial-gradient(circle at 12px 0, transparent 12px, black 13px) 0 0/24px 100%;
  mask:radial-gradient(circle at 12px 0, transparent 12px, black 13px) 0 0/24px 100%;
}
.lmg-page .lmg-cloth--flip{transform:rotate(180deg);}
.lmg-page .lmg-cloth > .elementor-container{min-height:inherit;}

/* Aire de sección a la carta: varios bloques seguidos se leen como uno solo. */
.lmg-page .lmg-air-top{padding-bottom:0;}
.lmg-page .lmg-air-none{padding-top:0;padding-bottom:0;}
.lmg-page .lmg-air-bottom{padding-top:0;}

/* Apiladas, las tarjetas de una rejilla se separan con el margen que lleva
   cada columna; la última cierra el bloque y no lleva ninguno. */
@media (max-width:767px){
  .lmg-page .lmg-cards > .elementor-container > .elementor-column:last-child > .elementor-element-populated{margin-bottom:0;}
}