:root{--page-title-display:none;}/* Start custom CSS *//* [fm:intro] */
/* ==========================================================================
   Frutas Moncalvillo · Inicio (#66) · CSS personalizado de la página
   Solo lo que los estilos locales V4 no pueden expresar: consultas que no son puntos de corte del Kit
   (767 px + proporción 4:5 del hero, alto ≤ 780 px, 1099 px), @keyframes, pseudo-elementos en consultas
   y el interior de los widgets HTML. Ganchos: atributos data-fm-* puestos en los elementos (estables al editar).
   Prefijo .elementor.elementor-66: gana a los estilos locales (.elementor .e-xxxx) sin !important.
   Fuente: web/assets/css/home.css de la maqueta aprobada.
   Bloques marcados con [fm:nombre] y [/fm:nombre]: se sustituyen de uno en uno al actualizar.
   ========================================================================== */
/* [/fm:intro] */

/* [fm:hero] */
/* HERO · banco de fotos Ken Burns ------------------------------------------ */
/* Solo se ve (y se descarga: las e-image son diferidas) la primera foto de la serie que toca;
   el motor (widget HTML de la fila de botones) arma cada foto unos segundos antes de su turno. */
.elementor.elementor-66 [data-fm-kb] img { opacity: 0; transition: opacity 1.8s cubic-bezier(.22, .61, .36, 1); will-change: opacity; }
.elementor.elementor-66 [data-fm-kb] img:not(:first-child):not(.is-armed) { display: none; }
.elementor.elementor-66 [data-fm-kb]:not(.is-on) img:first-child,
.elementor.elementor-66 [data-fm-kb] img.is-active { opacity: 1; }
/* Serie vertical en móvil y pantallas verticales (proporción ≤ 4:5); horizontal en el resto (= precarga 338) */
@media (max-width: 767px), (max-aspect-ratio: 4/5) { .elementor.elementor-66 [data-fm-kb="h"] { display: none; } }
@media (min-width: 768px) and (min-aspect-ratio: 801/1000) { .elementor.elementor-66 [data-fm-kb="v"] { display: none; } }
@keyframes fm-kb-a { from { transform: scale(1.03) translate3d(0, 0, 0); } to { transform: scale(1.14) translate3d(-1.2%, -.8%, 0); } }
@keyframes fm-kb-b { from { transform: scale(1.14) translate3d(1%, .6%, 0); } to { transform: scale(1.03) translate3d(0, 0, 0); } }
.elementor.elementor-66 [data-fm-hero].is-moving [data-fm-kb] img.is-active,
.elementor.elementor-66 [data-fm-hero].is-moving [data-fm-kb] img.is-leaving { animation: fm-kb-a 9.5s linear both; }
.elementor.elementor-66 [data-fm-hero].is-moving [data-fm-kb] img.is-b { animation-name: fm-kb-b; }
@media (prefers-reduced-motion: reduce) { .elementor.elementor-66 [data-fm-kb] img { transition: none; } }

/* HERO · entrada del texto (solo CSS, desde el primer pintado; el H1 sin retardo porque es el LCP) */
@keyframes fm-hero-in { from { opacity: 0; transform: translate3d(0, 26px, 0); } }
@keyframes fm-fade-in { from { opacity: 0; } }
@keyframes fm-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: no-preference) {
  .elementor.elementor-66 [data-fm-in] { animation: fm-hero-in 1s cubic-bezier(.16, 1, .3, 1) both; }
  .elementor.elementor-66 [data-fm-in="140"] { animation-delay: .14s; }
  .elementor.elementor-66 [data-fm-in="260"] { animation-delay: .26s; }
  .elementor.elementor-66 [data-fm-hero] .fm-hero__controls { animation: fm-fade-in .8s cubic-bezier(.22, .61, .36, 1) .5s both; }
  .elementor.elementor-66 [data-fm-hero] .fm-filete { animation: fm-grow-x 1s cubic-bezier(.16, 1, .3, 1) .6s both; }
}
/* Titular: «Moncalvillo» siempre en su línea; en móvil las otras dos líneas fluyen (como la maqueta) */
.elementor.elementor-66 [data-fm-hero] h1 em { display: block; margin-left: -.03em; }

/* HERO · barras de progreso del movimiento (29/09: sin botón «Pausar movimiento», decisión del usuario) */
.elementor.elementor-66 [data-fm="hero-row"] > .elementor-widget-html { width: auto; max-width: none; flex: 0 0 auto; margin: 0; }
.elementor.elementor-66 [data-fm-hero] .fm-hero__controls { display: flex; align-items: center; gap: 22px; }
.elementor.elementor-66 [data-fm-hero] .fm-hero__count { display: flex; align-items: center; }
.elementor.elementor-66 [data-fm-hero] .fm-hero__bars { display: flex; gap: 6px; }
.elementor.elementor-66 [data-fm-hero] .fm-hero__bar { position: relative; display: block; width: 28px; height: 2px; background: rgba(242, 241, 236, .25); overflow: hidden; border-radius: 2px; }
.elementor.elementor-66 [data-fm-hero] .fm-hero__bar::after { content: ""; position: absolute; inset: 0; background: var(--fm-pera); transform: scaleX(0); transform-origin: left center; }
.elementor.elementor-66 [data-fm-hero] .fm-hero__bar.is-done::after { transform: scaleX(1); }
.elementor.elementor-66 [data-fm-hero].is-moving .fm-hero__bar.is-active::after { animation: fm-bar var(--kb-step, 7s) linear both; }
.elementor.elementor-66 [data-fm-hero]:not(.is-moving) .fm-hero__bar.is-active::after { transform: scaleX(1); }
@keyframes fm-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.elementor.elementor-66 [data-fm-hero].is-static .fm-hero__controls { display: none; }

/* HERO · tableta y móvil: velo anclado al texto (empieza transparente bajo la cabecera y llega a .62 sobre el eyebrow) */
@media (max-width: 1023px) {
  .elementor.elementor-66 [data-fm="hero-content"] {
    --hero-pad-top: calc(var(--fm-header-h) + clamp(20px, 5vh, 72px));
    background: linear-gradient(180deg, rgba(11, 13, 12, 0) 0, rgba(11, 13, 12, .0992) calc(var(--hero-pad-top) * .35),
      rgba(11, 13, 12, .372) calc(var(--hero-pad-top) * .7), rgba(11, 13, 12, .62) calc(var(--hero-pad-top) - 4px), rgba(11, 13, 12, .62) 100%);
  }
}
@media (max-width: 699px) {
  .elementor.elementor-66 [data-fm-hero] h1 br { display: none; }
  .elementor.elementor-66 [data-fm-hero] .fm-eyebrow::before { display: none; }
  .elementor.elementor-66 [data-fm="hero-actions"] > * { flex: 1 1 auto; width: auto; }
  /* Se conserva el posicionamiento de antes (el hero móvil queda idéntico, solo desaparece el botón de pausa) */
  .elementor.elementor-66 [data-fm="hero-content"], .elementor.elementor-66 [data-fm="hero-row"] { position: static; }
  /* el envoltorio del widget HTML no ocupa sitio en la fila (si no, suma 20 px de separación bajo los botones) */
  .elementor.elementor-66 [data-fm="hero-row"] > .elementor-widget-html,
  .elementor.elementor-66 [data-fm="hero-row"] > .elementor-widget-html > .elementor-widget-container { display: contents; }
  /* en móvil no hay barras de progreso (como la maqueta) */
  .elementor.elementor-66 [data-fm-hero] .fm-hero__controls { display: none; }
}
/* Pantallas bajas (1280×720, 1366×768): se compacta el ritmo vertical para que el hero quepa en 100svh */
@media (min-width: 700px) and (max-height: 780px) {
  .elementor.elementor-66 [data-fm="hero-content"] { --hero-pad-top: calc(var(--fm-header-h) + 16px); padding-top: var(--hero-pad-top); padding-bottom: clamp(28px, 6vh, 52px); }
  .elementor.elementor-66 [data-fm-hero] h1 { margin-top: 12px; }
  .elementor.elementor-66 [data-fm-hero] .fm-filete { margin-top: 18px; }
  .elementor.elementor-66 [data-fm-in="140"] { margin-top: 16px; font-size: 1.125rem; }
  .elementor.elementor-66 [data-fm="hero-row"] { margin-top: 22px; }
}
/* [/fm:hero] */

/* [fm:productos] */
/* PRODUCTOS · la sierra del logo (widget HTML) como banda de horizonte ------ */
/* El envoltorio del widget no crea caja: la sierra se coloca respecto a su bloque (alto propio = --fm-sierra-band-h) */
.elementor.elementor-66 [data-fm="sierra"] > .elementor-widget-html,
.elementor.elementor-66 [data-fm="sierra"] > .elementor-widget-html > .elementor-widget-container { display: contents; }
.elementor.elementor-66 .fm-sierra { position: absolute; inset: 0; overflow: hidden; pointer-events: none; --sierra-x: 58%; }
.elementor.elementor-66 .fm-sierra__svg { position: absolute; bottom: -1px; left: var(--sierra-x); height: 100%; width: auto; max-width: none; aspect-ratio: 946 / 346.12; overflow: visible; transform: translateX(-50%); }
.elementor.elementor-66 .fm-sierra__fill { fill: var(--fm-bosque); }
.elementor.elementor-66 .fm-sierra__ridge, .elementor.elementor-66 .fm-sierra__horizon, .elementor.elementor-66 .fm-sierra__snow { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.elementor.elementor-66 .fm-sierra__ridge { stroke: rgba(103, 189, 69, .95); stroke-width: 1.25; }
.elementor.elementor-66 .fm-sierra__snow { stroke: rgba(242, 241, 236, .9); stroke-width: 2; }
.elementor.elementor-66 .fm-sierra__horizon { stroke: rgba(103, 189, 69, .45); stroke-width: 1; }
/* Trazado al entrar en pantalla (el widget pone fm-js e is-in) */
.elementor.elementor-66 .fm-sierra.fm-js .fm-sierra__ridge, .elementor.elementor-66 .fm-sierra.fm-js .fm-sierra__snow { stroke-dasharray: 1; stroke-dashoffset: 1; }
.elementor.elementor-66 .fm-sierra.fm-js.is-in .fm-sierra__ridge { stroke-dashoffset: 0; transition: stroke-dashoffset 2.4s cubic-bezier(.22, .61, .36, 1) .2s; }
.elementor.elementor-66 .fm-sierra.fm-js.is-in .fm-sierra__snow { stroke-dashoffset: 0; transition: stroke-dashoffset 2s cubic-bezier(.22, .61, .36, 1) .9s; }
.elementor.elementor-66 .fm-sierra.fm-js .fm-sierra__horizon { opacity: 0; transition: opacity 1.4s cubic-bezier(.22, .61, .36, 1) 1.2s; }
.elementor.elementor-66 .fm-sierra.fm-js.is-in .fm-sierra__horizon { opacity: 1; }
@media (max-width: 699px) { .elementor.elementor-66 .fm-sierra { --sierra-x: 60%; } }
/* Vitrina de Formatos (envoltorio 5c458e7): caja + bandeja vistas desde arriba, algo más pequeñas: 78 % (las demás 84 %, como la maqueta) */
.elementor.elementor-66 .elementor-element-5c458e7 .fm-vitrina-img { width: 78%; }
/* [/fm:productos] */

/* [fm:cierre] */
/* CIERRE · ventana pera: la foto (e-image nativa) recortada por el cuerpo de la pera; el widget HTML pone el clipPath
   y el dibujo encima (contorno y hoja). El envoltorio del widget cubre toda la ventana y no recibe clics. */
.elementor.elementor-66 [data-fm="pera-photo"] { clip-path: url(#fm-clip-pera-cuerpo); -webkit-clip-path: url(#fm-clip-pera-cuerpo); }
.elementor.elementor-66 [data-fm="pera-window"] > .elementor-widget-html,
.elementor.elementor-66 [data-fm="pera-window"] > .elementor-widget-html > .elementor-widget-container { position: absolute; inset: 0; margin: 0; pointer-events: none; }
.elementor.elementor-66 .fm-pera-window__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.elementor.elementor-66 .fm-pera-window__art { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; pointer-events: none; }
.elementor.elementor-66 .fm-pera-window__leaf { fill: var(--fm-musgo); stroke: rgba(103, 189, 69, .6); stroke-width: 1; vector-effect: non-scaling-stroke; }
.elementor.elementor-66 .fm-pera-window__outline { fill: none; stroke: rgba(103, 189, 69, .5); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* Botones del cierre a lo ancho en móvil (como la maqueta) */
@media (max-width: 699px) { .elementor.elementor-66 [data-fm="cie-actions"] > * { flex: 1 1 auto; width: auto; } }
/* [/fm:cierre] */

/* [fm:hero-h1] */
/* HERO · el H1 es el LCP: entra solo con movimiento, sin opacidad (MIGRACION-MAPA §2.3); el resto del texto, como la maqueta */
@keyframes fm-hero-move { from { transform: translate3d(0, 26px, 0); } }
@media (prefers-reduced-motion: no-preference) {
  .elementor.elementor-66 [data-fm-hero] h1[data-fm-in] { animation-name: fm-hero-move; }
}
/* [/fm:hero-h1] *//* End custom CSS */