.elementor-kit-8{--e-global-color-primary:#0B4034;--e-global-color-secondary:#A8DCCB;--e-global-color-text:#12211C;--e-global-color-accent:#EAF2ED;--e-global-color-llcrema1:#FBFAF7;--e-global-color-llgris001:#5B6B65;--e-global-color-llarena01:#F3E4CD;--e-global-color-llcielo01:#DCE9F5;--e-global-color-llsalvia1:#DCEBD2;--e-global-color-llmenta01:#CFE9DF;--e-global-color-llterrac1:#A65A32;--e-global-color-llazul001:#1D5C7A;--e-global-typography-primary-font-family:"Bricolage Grotesque";--e-global-typography-primary-font-size:48px;--e-global-typography-primary-font-weight:500;--e-global-typography-primary-line-height:0.98em;--e-global-typography-primary-letter-spacing:-0.035em;--e-global-typography-secondary-font-family:"Bricolage Grotesque";--e-global-typography-secondary-font-size:20px;--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-line-height:1.2em;--e-global-typography-secondary-letter-spacing:-0.02em;--e-global-typography-text-font-family:"Archivo";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.65em;--e-global-typography-accent-font-family:"Archivo";--e-global-typography-accent-font-size:12.5px;--e-global-typography-accent-font-weight:500;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-letter-spacing:0.2em;color:#12211C;font-family:"Archivo", Sans-serif;font-size:16px;font-weight:400;line-height:1.65em;}.elementor-kit-8 button,.elementor-kit-8 input[type="button"],.elementor-kit-8 input[type="submit"],.elementor-kit-8 .elementor-button{background-color:#0B4034;font-family:"Archivo", Sans-serif;font-size:15.5px;font-weight:500;color:#FBFAF7;border-style:none;border-radius:999px 999px 999px 999px;padding:16px 30px 16px 30px;}.elementor-kit-8 button:hover,.elementor-kit-8 button:focus,.elementor-kit-8 input[type="button"]:hover,.elementor-kit-8 input[type="button"]:focus,.elementor-kit-8 input[type="submit"]:hover,.elementor-kit-8 input[type="submit"]:focus,.elementor-kit-8 .elementor-button:hover,.elementor-kit-8 .elementor-button:focus{background-color:#12211C;color:#FBFAF7;}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-kit-8 a{color:#0B4034;}.elementor-kit-8 a:hover{color:#12211C;}.elementor-kit-8 h1{color:#12211C;font-family:"Bricolage Grotesque", Sans-serif;font-size:76px;font-weight:500;line-height:0.94em;letter-spacing:-0.04em;}.elementor-kit-8 h2{color:#12211C;font-family:"Bricolage Grotesque", Sans-serif;font-size:54px;font-weight:500;line-height:0.98em;letter-spacing:-0.035em;}.elementor-kit-8 h3{color:#12211C;font-family:"Bricolage Grotesque", Sans-serif;font-size:20px;font-weight:600;line-height:1.2em;letter-spacing:-0.02em;}.elementor-kit-8 h4{color:#12211C;font-family:"Archivo", Sans-serif;font-size:16.5px;font-weight:600;line-height:1.35em;}.elementor-kit-8 label{color:rgba(11,64,52,0.65);font-family:"Archivo", Sans-serif;font-size:12.5px;text-transform:uppercase;letter-spacing:0.12em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-kit-8 h1{font-size:52px;}.elementor-kit-8 h2{font-size:40px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-8 h1{font-size:38px;}.elementor-kit-8 h2{font-size:31px;}.elementor-kit-8 h3{font-size:19px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ============================================================
   Limpiezas Luna — CSS del Kit
   Todas las clases van prefijadas con .ll- para no afectar
   al editor de Elementor. !important solo en layout esencial.
   ============================================================ */

/* ── Cabecera pegajosa ─────────────────────────────────────── */
.ll-header { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: box-shadow .4s ease, padding .4s ease; }

/* ── Marca / luna ──────────────────────────────────────────── */
.ll-logo img { transition: transform .7s cubic-bezier(.34,1.4,.5,1); }
.ll-logo:hover img { transform: rotate(-18deg) scale(1.08); }

/* ── Botones ───────────────────────────────────────────────── */
.ll-btn .elementor-button { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, background-color .3s ease, color .3s ease; }
.ll-btn .elementor-button:hover { box-shadow: 0 14px 30px rgba(11,64,52,.26); }
.ll-btn .elementor-button-icon { transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.ll-btn .elementor-button:hover .elementor-button-icon { transform: translateX(5px); }

/* ── Píldora de la portada ─────────────────────────────────── */
.ll-pill { width: auto !important; flex: 0 0 auto !important; align-self: flex-start; max-width: 100%; }
/* El logo comparte la clase .ll-pill, pero en la cabecera ese
   align-self:flex-start lo dejaba 8px por encima del teléfono y de
   la hamburguesa.
   OJO: solo en la CABECERA. Allí el contenedor es una fila y 'center'
   centra en vertical; en el pie es una columna y centraría en
   horizontal, descolocando el logo respecto a su propia columna. */
.ll-header .ll-logo { align-self: center !important; }
.ll-pill-row > .e-con-inner { display: flex !important; flex-wrap: wrap !important; }
.ll-pill-zone { transition: transform .35s cubic-bezier(.2,.8,.2,1), background-color .3s ease; }
.ll-pill-zone:hover { transform: translateY(-3px); filter: brightness(0.96); }

/* ── Foto de portada ───────────────────────────────────────── */
.ll-hero-img img { transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.ll-hero-img:hover img { scale: 1.04; }

/* ── Tarjetas de servicio ──────────────────────────────────── */
.ll-card { transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.ll-card:hover { transform: translateY(-7px); }
.ll-card .elementor-widget-image img { transition: transform 1.1s cubic-bezier(.2,.8,.2,1); }
.ll-card:hover .elementor-widget-image img { scale: 1.07; }
.ll-card .elementor-widget-image { overflow: hidden; border-radius: 20px; }

/* ── Plan de tareas ────────────────────────────────────────── */
.ll-task { transition: background-color .3s ease, padding-left .35s cubic-bezier(.2,.8,.2,1); border-radius: 10px; }
.ll-task:hover { background-color: rgba(168,220,203,.35); padding-left: 10px; }

/* ── Ventajas con asterisco ────────────────────────────────── */
.ll-feat { transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.ll-feat:hover { transform: translateX(6px); }
.ll-feat .elementor-widget-icon svg,
.ll-feat .elementor-widget-icon i { transition: transform .6s cubic-bezier(.34,1.4,.5,1); }
.ll-feat:hover .elementor-widget-icon svg,
.ll-feat:hover .elementor-widget-icon i { transform: rotate(180deg) scale(1.2); }

/* ── Pasos del método ──────────────────────────────────────── */
.ll-step { transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease; }
.ll-step:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(11,64,52,.13); }
.ll-badge { align-self: flex-start; flex: 0 0 auto; transition: transform .5s cubic-bezier(.34,1.4,.5,1); }
.ll-step:hover .ll-badge { transform: scale(1.12) rotate(-8deg); }

/* ── Bloque de administradores ─────────────────────────────── */
.ll-kpi { transition: padding-left .4s cubic-bezier(.2,.8,.2,1); border-left: 2px solid transparent; }
.ll-kpi:hover { padding-left: 16px; border-left-color: #A8DCCB; }

/* ── Testimonios ───────────────────────────────────────────── */
.ll-quote { transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.ll-quote:hover { transform: translateY(-4px); }

/* ── Botón flotante de WhatsApp (redondo, solo icono) ──────── */
.ll-wa { width: auto; }
.ll-wa .elementor-button {
  width: 58px; height: 58px; padding: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 34px rgba(9,38,31,.34);
}
.ll-wa .elementor-button-content-wrapper { justify-content: center; }
.ll-wa .elementor-button-icon { margin: 0; }
.ll-wa .elementor-button-icon svg { width: 28px; height: 28px; }
/* El texto sigue ahí para lectores de pantalla, pero no se ve */
.ll-wa .elementor-button-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Latido suave para que se vea */
.ll-wa .elementor-button::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(11,64,52,.45);
  animation: ll-latido 2.6s ease-out infinite;
}
@keyframes ll-latido {
  0%   { box-shadow: 0 0 0 0 rgba(11,64,52,.45); }
  70%  { box-shadow: 0 0 0 16px rgba(11,64,52,0); }
  100% { box-shadow: 0 0 0 0 rgba(11,64,52,0); }
}
.ll-wa .elementor-button:hover::after { animation: none; }
@media (max-width: 767px) {
  .ll-wa .elementor-button { width: 54px; height: 54px; }
  .ll-wa .elementor-button-icon svg { width: 26px; height: 26px; }
}

/* ── Contadores de la portada ──────────────────────────────── */
.ll-counter .elementor-counter-number-wrapper { line-height: 1; }

/* ── Tarjeta de contacto directo ─────────────────────────────── */
.ll-tel a { transition: color .3s ease; }
.ll-tel a:hover { color: #12211C; }

/* ── Enlaces del pie ───────────────────────────────────────── */
.ll-footlink a { transition: color .3s ease, transform .3s ease; display: inline-block; }
.ll-footlink a:hover { transform: translateX(4px); }

/* ── Menú de navegación ────────────────────────────────────── */
.ll-nav .elementor-item::after { transition: transform .4s cubic-bezier(.65,0,.35,1) !important; }

/* ── Respeta la preferencia de menos movimiento ────────────── */
@media (prefers-reduced-motion: reduce) {
  .ll-wa .elementor-button::after { animation: none; }
}

/* ── Piezas que usa la capa de movimiento (GSAP) ─────────────── */
/* Barra de progreso de lectura, se crea por JS */
.ll-progress {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 100;
  background: linear-gradient(90deg, #0B4034, #A8DCCB);
  transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
}
/* Máscara por palabra en los titulares */
.ll-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .09em; margin-bottom: -.09em; }
.ll-wi { display: inline-block; will-change: transform; }

/* ── Banda a sangre ──────────────────────────────────────────── */
.ll-band { will-change: clip-path; }

/* ── Pie: rótulo gigante recortado ───────────────────────────── */
.ll-footer { position: relative; }
.ll-wordmark { overflow: hidden; height: 132px; pointer-events: none; user-select: none; }
.ll-wordmark .elementor-heading-title { white-space: nowrap; }
@media (max-width: 1024px) { .ll-wordmark { height: 82px; } }
@media (max-width: 767px)  { .ll-wordmark { height: 44px; } }

/* ── Pie: enlaces de columna ─────────────────────────────────── */
.ll-footer .ll-footlink a:hover { color: #A8DCCB; }

/* ── Mosaico de dos fotos (comunidades) ──────────────────────── */
.ll-mosaico > .elementor-widget-image { flex: 1 1 0 !important; min-width: 0; }
.ll-mosaico > .elementor-widget-image:first-child { flex: 1.4 1 0 !important; }
/* En móvil el mosaico sigue en fila, más bajo, para no alargar la página */
@media (max-width: 767px) {
  .ll-mosaico > .elementor-widget-image img { height: 150px !important; }
}

/* ── Foto del bloque de administradores ──────────────────────── */
.ll-admin-foto { width: 100% !important; }

/* ── Fotos de los pasos del método ───────────────────────────── */
.ll-step .elementor-widget-image { overflow: hidden; border-radius: 14px; }
.ll-step .elementor-widget-image img { transition: transform 1.1s cubic-bezier(.2,.8,.2,1); }
.ll-step:hover .elementor-widget-image img { scale: 1.06; }

/* ── Móvil: la tarjeta de método se pone en horizontal ───────── */
@media (max-width: 767px) {
  .ll-step .ll-step-foto { flex: 0 0 38%; max-width: 38%; }
  .ll-step .ll-badge { display: none; }
  .ll-step .elementor-widget-heading,
  .ll-step .elementor-widget-text-editor { padding-left: 12px; }
  /* las tres cifras van en fila: rótulo más corto de línea */
  .ll-stat .elementor-counter-title { font-size: 11.5px; line-height: 1.3; }
  .ll-stat .elementor-counter-number-wrapper { font-size: 26px; }
  /* las tarjetas de servicio, más compactas al ir de dos en dos */
  .ll-card .elementor-heading-title { font-size: 17px; line-height: 1.2; }
  .ll-card .elementor-widget-text-editor { font-size: 13.5px; }
}

/* ── Móvil: el menú, a la derecha del todo ───────────────────── */
@media (max-width: 767px) {
  /* El widget del menú ocupaba 203px: se ajusta a la hamburguesa y ambos
     botones se agrupan a la derecha */
  .ll-header .ll-nav { order: 3; flex: 0 0 auto !important; width: auto !important; }
  .ll-header .ll-tel-btn { order: 2; flex: 0 0 auto !important; width: auto !important; margin-left: auto; }
  .ll-header .ll-logo { order: 1; }
  /* El rótulo cabe: el teléfono y el menú son iconos compactos */
  .ll-header .ll-brand-name .elementor-heading-title { white-space: nowrap; }
  .ll-header .elementor-menu-toggle { background: none !important; }
  /* Botón principal a todo el ancho, se ve mucho más */
  .ll-hero-cta { width: 100%; }
  .ll-hero-cta .elementor-button { width: 100%; justify-content: center; }
}
/* El desplegable del menú ocupa el ancho y respira */
.ll-nav .elementor-nav-menu--dropdown { box-shadow: 0 18px 40px rgba(18,33,28,.14); }


/* ── Portada a sangre ────────────────────────────────────────── */
.ll-hero2 { position: relative; }
/* El bloque verde llega al borde, pero su texto tiene que caer sobre la
   misma retícula de 1200px que el logo y el resto de secciones. */
@media (min-width: 1025px) {
  /* 100% (no 100vw) porque vw incluye la barra de scroll y desplazaba 7px */
  .ll-hero-texto { padding-left: max(40px, calc((100% - 1200px) / 2)) !important; }
}
/* La foto no se recorta con el lazy-load: es lo primero que se ve */
.ll-hero-foto { will-change: background-position; }
/* La franja de cifras monta sobre la foto */
/* Sin min-width:0 las tres cifras no bajan del ancho de su texto y saltan de línea */
.ll-cifras .ll-stat { min-width: 0; }
.ll-cifras .elementor-counter-number-wrapper { font-size: 32px; }
@media (max-width: 767px) {
  .ll-cifras .elementor-counter-number-wrapper { font-size: 25px; }
  .ll-cifras .elementor-counter-title { font-size: 11px; line-height: 1.3; }
}
/* Los dos botones de la portada, a lo ancho en móvil */
@media (max-width: 767px) {
  .ll-hero2 .ll-hero-cta { width: 100%; }
  .ll-hero2 .ll-hero-cta .elementor-button { width: 100%; justify-content: center; }
}

/* El desplegable cerrado ocupaba 203px de ancho dentro del widget y
   descolocaba la cabecera: se saca del flujo. */
@media (max-width: 1024px) {
  .ll-header .ll-nav .elementor-nav-menu--dropdown { position: absolute; top: 100%; left: 0; right: 0; }
}

/* ── Menú de pantalla completa (móvil y tablet) ──────────────── */
/* Se engancha a .ll-nav:has(.elementor-menu-toggle[aria-expanded="true"]) (la pone el JS al abrir el menú) porque
   Elementor anima su desplegable con max-height/transform y gana al .elementor-kit-8
   de hermano. Colores y tamaños siguen saliendo del widget. */
@media (max-width: 1024px) {
  .ll-nav:has(.elementor-menu-toggle[aria-expanded="true"]) .elementor-nav-menu--dropdown {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-height: none !important;
    transform: none !important;
    /* sin transición: la apertura la hace la animación de recorte */
    transition: none !important;
    margin: 0 !important;
    padding: 112px 28px 48px !important;
    z-index: 99990 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    overflow-y: auto !important;
    background: linear-gradient(165deg, #0B4034 0%, #09261F 100%);
    /* !important porque Elementor pone su propia animación al panel */
    animation: ll-menu-in .45s cubic-bezier(.65,0,.35,1) both !important;
  }
  /* Telón que baja. En móvil se hace con translate+opacidad, que va sobre
     la GPU: el clip-path a pantalla completa da tirones en iOS. */
  @keyframes ll-menu-in { from { opacity: 0; translate: 0 -18px; } to { opacity: 1; translate: 0 0; } }
  @media (min-width: 768px) {
    @keyframes ll-menu-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
  }
  /* Los enlaces entran uno detrás de otro */
  .ll-nav:has(.elementor-menu-toggle[aria-expanded="true"]) .elementor-nav-menu { counter-reset: llmenu; }
  .ll-nav:has(.elementor-menu-toggle[aria-expanded="true"]) .elementor-nav-menu > li {
    counter-increment: llmenu;
    position: relative;
    overflow: hidden;
  }
  /* La línea se dibuja de izquierda a derecha */
  .ll-nav:has(.elementor-menu-toggle[aria-expanded="true"]) .elementor-nav-menu > li::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: rgba(251,250,247,.16);
    transform-origin: 0 50%;
    animation: ll-linea .8s cubic-bezier(.16,1,.3,1) both;
  }
  .ll-nav:has(.elementor-menu-toggle[aria-expanded="true"]) li.ll-menu-cta::after,
  .ll-nav:has(.elementor-menu-toggle[aria-expanded="true"]) .elementor-nav-menu > li:nth-child(5)::after { content: none; }
  @keyframes ll-linea { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .ll-nav:has(.elementor-menu-toggle[aria-expanded="true"]) .elementor-nav-menu--dropdown .elementor-item {
    color: #FBFAF7 !important;
    justify-content: flex-start;
    align-items: baseline;
    gap: 16px;
    animation: ll-menu-item .65s cubic-bezier(.16,1,.3,1) both;
  }
  /* Numeración 01, 02… delante de cada enlace */
  .ll-nav:has(.elementor-menu-toggle[aria-expanded="true"]) .elementor-nav-menu > li > .elementor-item::before {
    content: counter(llmenu, decimal-leading-zero);
    font-family: 'Archivo', sans-serif;
    font-size: 12px; font-weight: 500; letter-spacing: .16em;
    color: #A8DCCB; opacity: .75;
    /* Elementor pone position:absolute en este ::before (lo usa para el
       subrayado del hover). Hay que devolverlo al flujo o se pinta encima
       del texto del enlace. */
    position: static !important;
    flex: 0 0 auto;
    width: 26px;
  }
  .ll-nav:has(.elementor-menu-toggle[aria-expanded="true"]) .elementor-nav-menu--dropdown .elementor-item:hover,
  .ll-nav:has(.elementor-menu-toggle[aria-expanded="true"]) .elementor-nav-menu--dropdown .elementor-item-active { color: #A8DCCB !important; background: none !important; }
  /* Suben desde detrás de la máscara del <li> */
  @keyframes ll-menu-item { from { opacity: 0; translate: 0 110%; } to { opacity: 1; translate: 0 0; } }
  .ll-nav:has(.elementor-menu-toggle[aria-expanded="true"]) li:nth-child(1) .elementor-item { animation-delay: .16s; }
  .ll-nav:has(.elementor-menu-toggle[aria-expanded="true"]) li:nth-child(1)::after { animation-delay: .16s; }
  .ll-nav:has(.elementor-menu-toggle[aria-expanded="true"]) li:nth-child(2) .elementor-item { animation-delay: .22s; }
  .ll-nav:has(.elementor-menu-toggle[aria-expanded="true"]) li:nth-child(2)::after { animation-delay: .22s; }
  .ll-nav:has(.elementor-menu-toggle[aria-expanded="true"]) li:nth-child(3) .elementor-item { animation-delay: .28s; }
  .ll-nav:has(.elementor-menu-toggle[aria-expanded="true"]) li:nth-child(3)::after { animation-delay: .28s; }
  .ll-nav:has(.elementor-menu-toggle[aria-expanded="true"]) li:nth-child(4) .elementor-item { animation-delay: .34s; }
  .ll-nav:has(.elementor-menu-toggle[aria-expanded="true"]) li:nth-child(4)::after { animation-delay: .34s; }
  .ll-nav:has(.elementor-menu-toggle[aria-expanded="true"]) li:nth-child(5) .elementor-item { animation-delay: .40s; }
  .ll-nav:has(.elementor-menu-toggle[aria-expanded="true"]) li:nth-child(5)::after { animation-delay: .40s; }
  /* La X, fija arriba a la derecha y por encima del panel */
  .ll-nav:has(.elementor-menu-toggle[aria-expanded="true"]) .elementor-menu-toggle {
    position: fixed !important;
    top: 16px; right: 18px;
    z-index: 99999 !important;
    color: #FBFAF7 !important;
  }
  .ll-nav:has(.elementor-menu-toggle[aria-expanded="true"]) .elementor-menu-toggle svg { fill: #FBFAF7 !important; }
}
/* Con el menú abierto la página de detrás no se mueve */
.ll-nav:has(.elementor-menu-toggle[aria-expanded="true"]) { overflow: hidden; }

/* ── Menú: los dos últimos enlaces son las llamadas a la acción ─ */
@media (max-width: 1024px) {
  .ll-nav:has(.elementor-menu-toggle[aria-expanded="true"]) li.ll-menu-cta { border-bottom: 0 !important; margin-top: 10px; overflow: visible; }
  .ll-nav:has(.elementor-menu-toggle[aria-expanded="true"]) li:nth-child(6) .elementor-item { animation-delay: .50s; }
  .ll-nav:has(.elementor-menu-toggle[aria-expanded="true"]) li:nth-child(7) .elementor-item { animation-delay: .56s; }
  .ll-nav:has(.elementor-menu-toggle[aria-expanded="true"]) li.ll-menu-cta > .elementor-item {
    font-size: 17px !important;
    font-family: 'Archivo', sans-serif !important;
    letter-spacing: 0 !important;
    padding: 15px 26px !important;
    border-radius: 999px;
    justify-content: center !important;
  }
  .ll-nav:has(.elementor-menu-toggle[aria-expanded="true"]) li.ll-menu-cta > .elementor-item::before { content: none; }
  .ll-nav:has(.elementor-menu-toggle[aria-expanded="true"]) li.ll-menu-cta-1 > .elementor-item { background: #A8DCCB; color: #0B4034 !important; }
  .ll-nav:has(.elementor-menu-toggle[aria-expanded="true"]) li.ll-menu-cta-2 > .elementor-item { box-shadow: inset 0 0 0 1px rgba(251,250,247,.35); }
}
/* En escritorio esos dos enlaces no se muestran */
@media (min-width: 1025px) { .ll-nav li.ll-menu-cta { display: none !important; } }

/* ── Cabecera: en móvil el teléfono se queda en icono ─────────── */
@media (max-width: 767px) {
  .ll-tel-btn .elementor-button { width: 44px; height: 44px; padding: 0; border-radius: 50%; justify-content: center; }
  .ll-tel-btn .elementor-button-text {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .ll-tel-btn .elementor-button-icon { margin: 0; }
  .ll-tel-btn .elementor-button-icon svg { width: 17px; height: 17px; }
}

/* ── Portada: los dos botones, en fila en móvil ───────────────── */
@media (max-width: 767px) {
  /* Solo cuando la fila lleva un botón-icono declarado */
  .ll-botones:has(.ll-btn-icono) > .elementor-widget-button:first-child { flex: 1 1 0 !important; min-width: 0; }
  .ll-botones:has(.ll-btn-icono) > .elementor-widget-button:first-child .elementor-button { width: 100%; justify-content: center; }
  /* El botón-icono queda como círculo de tamaño fijo */
  .ll-botones > .elementor-widget-button.ll-btn-icono { flex: 0 0 56px !important; width: 56px; }
  .ll-botones > .ll-btn-icono .elementor-button {
    box-sizing: border-box;
    width: 56px !important; height: 56px !important;
    padding: 0 !important;
    border-radius: 50%;
    /* El botón de Elementor es inline-block: sin esto el icono se pega
       a la línea base de arriba y queda 16px descentrado. */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 0;
  }
  .ll-botones > .ll-btn-icono .elementor-button-text {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .ll-botones > .ll-btn-icono .elementor-button-icon { margin: 0; }
  .ll-botones > .ll-btn-icono .elementor-button-icon svg { width: 22px; height: 22px; }
  /* Dos botones con texto: se reparten la fila y ninguno pierde su etiqueta */
  .ll-botones:not(:has(.ll-btn-icono)) > .elementor-widget-button { flex: 1 1 auto; min-width: 0; }
  .ll-botones:not(:has(.ll-btn-icono)) .elementor-button { width: 100%; justify-content: center; }
}

/* ── El flotante solo aparece cuando el JS lo activa (20% de scroll) ─ */
/* Sin JS la clase nunca se pone y el boton se ve siempre: nunca se pierde */
.ll-wa-auto { opacity: 0; pointer-events: none; transform: translateY(14px) scale(.85); }
.ll-wa-auto.ll-visible {
  opacity: 1; pointer-events: auto; transform: none;
  transition: opacity .45s ease, transform .45s cubic-bezier(.34,1.4,.5,1);
}

/* ── Las secciones se apilan sobre la portada ─────────────────── */
/* La portada se queda fija arriba y el resto de la pagina pasa por
   encima. Es CSS puro: si algo falla, se ve como una pagina normal. */
/* Cada sección sube sobre la anterior con la esquina redondeada y
   una sombra arriba: se leen como hojas apiladas. Los fondos van
   alternando para que el borde se vea. */
.elementor-37 > .e-con:not(.ll-hero2) {
  position: relative;
  background-color: #FBFAF7;
}
/* Tonos alternos: crema y un verde muy lavado */
.elementor-37 > .e-con:nth-child(3),
.elementor-37 > .e-con:nth-child(5),
.elementor-37 > .e-con:nth-child(7),
.elementor-37 > .e-con:nth-child(9) { background-color: #F1F5F1; }

/* El pie cierra por encima de todo */
.ll-footer { position: relative; z-index: 20; }

/* ── Franja de localidades ────────────────────────────────────
   Era un bloque casi vacío. Ahora es una tira estrecha: el rótulo
   y las localidades comparten línea en escritorio. */
@media (min-width: 1025px) {
  .elementor-37 > .e-con:nth-child(2) .e-con-inner > .e-con {
    flex-wrap: nowrap;
    align-items: center;
  }
  /* El rótulo deja de ocupar toda la línea… */
  .elementor-37 > .e-con:nth-child(2) .ll-pill:not(.ll-pill-row) {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  /* …y las localidades ocupan el resto de la tira */
  .elementor-37 > .e-con:nth-child(2) .ll-pill-row {
    flex: 1 1 auto;
    width: auto !important;
    justify-content: flex-end;
  }
}

/* ── Baraja de tarjetas en «Comunidades» ──────────────────────
   Aquí sí funciona el apilado, porque el sticky vive dentro de una
   columna concreta y no de la página entera: la columna es más alta
   que la pantalla, así que hay recorrido de sobra. Solo en escritorio;
   en móvil las tarjetas siguen una debajo de otra, como hasta ahora. */
@media (min-width: 1025px) {
  .ll-deck-fila { align-items: flex-start !important; }

  /* El plan de tareas se queda quieto mientras la baraja se apila */
  .ll-deck-izq {
    position: sticky;
    top: 108px;
    align-self: flex-start;
  }

  .ll-deck { gap: 22px; }

  /* Cada hijo de la baraja es una carta opaca clavada a distinta altura:
     al subir la siguiente tapa a la anterior y deja ver su borde. */
  .ll-deck > * {
    position: sticky;
    min-height: 208px;
    box-sizing: border-box;
    justify-content: flex-start;
    background-color: #FBFAF7;
    border: 1px solid rgba(11,64,52,.10) !important;
    border-radius: 26px;
    padding: 30px !important;
    margin: 0 !important;
    box-shadow: none;
  }
  .ll-deck > *:nth-child(1) { top: 108px; }
  .ll-deck > *:nth-child(2) { top: 124px; }
  .ll-deck > *:nth-child(3) { top: 140px; }
  .ll-deck > *:nth-child(4) { top: 156px; }

  /* La carta de fotos va a sangre dentro de su tarjeta */
  .ll-deck > .ll-mosaico { padding: 10px !important; }

  /* Las ventajas dejan de ser filas con raya y pasan a ser cartas */
  .ll-deck > .ll-feat {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .ll-deck > .ll-feat .elementor-widget-heading .elementor-heading-title {
    font-size: 26px;
    line-height: 1.15;
  }
}

/* ── Las fotos recortan, no se estiran ────────────────────────
   Elementor deja object-fit:fill. Con alto fijo eso achata la foto:
   las de los pasos son 3:2 metidas en una caja de casi 2:1. */
.elementor-37 .elementor-widget-image img,
.ll-footer .elementor-widget-image img { object-fit: cover; }
.ll-kitdigital .elementor-widget-image img { object-fit: contain !important; }

/* ── Enlaces del pie ──────────────────────────────────────────
   El pie es claro: la tinta va en verde profundo. Al 78 % el
   contraste sobre el fondo es 5,2, por encima del 4,5 mínimo. */
.ll-footer a:not(.elementor-button):not(.elementor-button-link) {
  color: rgba(251,250,247,.78);
  transition: color .2s ease;
}
.ll-footer a:not(.elementor-button):not(.elementor-button-link):hover { color: #FBFAF7; }
.ll-footer .ll-legal a { color: rgba(251,250,247,.72); }
.ll-footer .ll-legal a:hover { color: #FBFAF7; }

/* ── Afinado de la baraja ─────────────────────────────────────
   Antes las cuatro cartas eran del mismo crema: apiladas se veían
   como bandas blancas vacías. Con un tono por carta el borde que
   asoma dice de qué carta es, y el escalón sube a 22px para que
   se vea. */
@media (min-width: 1025px) {
  .ll-deck > *:nth-child(1) { top: 104px; }
  .ll-deck > *:nth-child(2) { top: 126px; background-color: #CFE9DF; }
  .ll-deck > *:nth-child(3) { top: 148px; background-color: #DCE9F5; }
  .ll-deck > *:nth-child(4) { top: 170px; background-color: #F3E4CD; }
  .ll-deck > *:nth-child(n+2) { border-color: transparent !important; }

  /* La carta de fotos deja ver las fotos enteras */
  .ll-deck > .ll-mosaico { min-height: 320px; align-content: center; }
  .ll-deck > .ll-mosaico .elementor-widget-image img { height: 288px !important; }
}

/* ── Cifras: tres columnas también en móvil ───────────────────
   Número arriba y etiqueta debajo, las tres en fila. La etiqueta parte
   en dos líneas y no pasa nada: las columnas se estiran a la misma
   altura, así que los tres números comparten línea. */
.ll-counter .elementor-counter-number-wrapper { text-align: left !important; }

@media (max-width: 767px) {
  .ll-cifras {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .ll-cifras > .ll-stat {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
  }
  /* Orden natural del widget: el DOM va [etiqueta, número] */
  .ll-cifras .elementor-counter {
    flex-direction: column-reverse !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px;
  }
  .ll-cifras .elementor-counter-number-wrapper {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }
  .ll-cifras .elementor-counter-title {
    flex: 0 0 auto !important;
    text-align: left !important;
  }
  /* A 104px de columna hay que bajar un punto ambos tamaños */
  .ll-cifras .elementor-counter-number,
  .ll-cifras .elementor-counter-number-prefix,
  .ll-cifras .elementor-counter-number-suffix { font-size: 27px !important; }
  .ll-cifras .elementor-counter-title { font-size: 12.5px !important; line-height: 1.35 !important; }
}

/* ── Botón del menú: hamburguesa que se convierte en aspa ─────
   Elementor cambia un SVG por otro de golpe. Se ocultan los dos y se
   dibujan dos barras que giran, así el paso es continuo. */
@media (max-width: 1024px) {
  .ll-nav .elementor-menu-toggle svg { display: none !important; }
  .ll-nav .elementor-menu-toggle {
    position: relative;
    width: 46px; height: 46px;
    background: none !important;
    border-radius: 50%;
    z-index: 99999;
    transition: background-color .25s ease;
  }
  .ll-nav .elementor-menu-toggle::before,
  .ll-nav .elementor-menu-toggle::after {
    content: '';
    position: absolute; left: 12px;
    width: 22px; height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .4s cubic-bezier(.65,0,.35,1), top .3s cubic-bezier(.65,0,.35,1), width .3s ease;
  }
  .ll-nav .elementor-menu-toggle::before { top: 19px; }
  .ll-nav .elementor-menu-toggle::after  { top: 26px; width: 15px; }

  /* Abierto: las dos barras se juntan y giran hasta formar el aspa */
  .ll-nav .elementor-menu-toggle[aria-expanded="true"] {
    position: fixed; top: 20px; right: 18px;
    color: #FBFAF7 !important;
  }
  .ll-nav .elementor-menu-toggle[aria-expanded="true"]::before { top: 22px; transform: rotate(45deg); }
  .ll-nav .elementor-menu-toggle[aria-expanded="true"]::after  { top: 22px; width: 22px; transform: rotate(-45deg); }

  /* ── El logo del panel, ahora con su palabra ───────────────── */
  .ll-nav:has(.elementor-menu-toggle[aria-expanded="true"]) .elementor-nav-menu--dropdown::before {
    content: 'Limpiezas Luna';
    position: absolute; top: 30px; left: 28px;
    padding-left: 46px;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 19px; font-weight: 600; letter-spacing: -.02em;
    color: #FBFAF7;
    line-height: 34px;
    background: url('https://limpiezasluna.es/wp-content/uploads/2026/08/logo-limpiezas-luna-claro.png') no-repeat left center / 34px 34px;
    animation: ll-logo-in .5s cubic-bezier(.2,.8,.2,1) .1s both;
  }
  @keyframes ll-logo-in { from { opacity: 0; translate: -10px 0; } to { opacity: 1; translate: 0 0; } }
}

/* ── Página de contacto ───────────────────────────────────────
   Sin formulario: las tarjetas de canal son la acción principal,
   así que tienen que verse como algo pulsable. */
.ll-canal { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.ll-canal:hover { transform: translateY(-4px); }
.ll-canal .elementor-button { width: 100%; justify-content: center; }

/* El número de fase no es decorativo: numera los pasos */
.ll-fase { counter-increment: llfase; }

/* Las dudas van a dos columnas y la raya no cierra las dos últimas */
@media (min-width: 1025px) {
  .ll-duda:nth-last-child(-n+2) { border-bottom: none !important; }
}
@media (max-width: 1024px) {
  .ll-duda:last-child { border-bottom: none !important; }
}

/* La lista de apuntes respira igual que el plan de tareas de inicio */
.ll-apunte:first-child { padding-top: 24px !important; }
.ll-apunte:last-child { padding-bottom: 24px !important; }

/* ── Contador: los espacios fantasma ──────────────────────────
   La plantilla del widget deja saltos de línea dentro de los <span>
   de prefijo y sufijo, y con 'white-space: pre' se pintan como un
   espacio de 30px: eran los 20px que metían el «16» hacia dentro.
   El espacio bueno de «24 h» va como espacio duro, que no colapsa. */
.ll-counter .elementor-counter-number-prefix,
.ll-counter .elementor-counter-number-suffix {
  white-space: normal;
  /* Y sobre todo: no crecer. Elementor les pone flex-grow, así que un
     prefijo vacío se comía el sobrante del canal y empujaba el número
     hacia dentro (el «16» acababa 25px más a la derecha que el «+180»). */
  flex: 0 0 auto !important;
}

/* ── Botón del menú: alinearlo por la barra, no por su caja ───
   Las barras van 12px metidas dentro de la caja de 46px, así que el
   botón parecía 12px más adentro que el logo. */
@media (max-width: 1024px) {
  .ll-nav .elementor-menu-toggle { margin-right: -12px !important; }
  .ll-nav .elementor-menu-toggle[aria-expanded="true"] { right: 10px; margin-right: 0; }
}

/* ── Iconos de las tarjetas de contacto ───────────────────────
   El widget de icono se centra por defecto y rompía la columna. */
.ll-canal .elementor-widget-icon,
.ll-canal .elementor-icon-wrapper { text-align: left !important; }

/* La última pregunta ya no arrastra su padding: dejaba un hueco raro
   antes de la banda de cierre cuando la respuesta era corta. */
@media (max-width: 1024px) {
  .ll-duda:last-child { padding-bottom: 4px !important; }
}

/* El círculo mide 56 y el botón de al lado 48: sin centrar el eje
   cruzado quedaban 4px descolgados. */
.ll-botones { align-items: center; }

/* ── Páginas legales ──────────────────────────────────────────
   Texto largo: medida de lectura corta, enlaces subrayados para que
   se distingan dentro del párrafo y jerarquía tranquila. */
.ll-legal p { margin-bottom: 14px; }
.ll-legal p:last-child { margin-bottom: 0; }
.ll-legal a { color: #0B4034; text-decoration: underline; text-underline-offset: 3px; }
.ll-legal a:hover { color: #12211C; }
.ll-legal strong { font-weight: 600; color: #12211C; }
.ll-legal-bloque:first-child { padding-top: 0 !important; }

/* ── Banner de cookies: igualar Aceptar y Rechazar ────────────
   El plugin les da el mismo color, pero con 'flex: 1 1 auto' el de
   aceptar salía a 376px y el de rechazar a 230. La AEPD exige que
   rechazar sea IGUAL de fácil, y eso incluye la prominencia visual.
   Con base 0 los dos miden lo mismo. */
/* El contenedor mide 376px y los tres botones no caben en una línea:
   al envolver, «Aceptar» se quedaba solo ocupando el ancho entero (376
   frente a 230 de «Rechazar»). Con rejilla comparten fila y miden igual. */
.gtc-banner-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.gtc-banner-actions .gtc-prefs-open { grid-column: 1 / -1; }
.gtc-banner-actions .gtc-btn { min-width: 0 !important; white-space: normal; }
.gtc-modal-foot .gtc-btn-equal { flex: 1 1 0 !important; }

/* ── Aviso de cookies con la estética del sitio ───────────────
   El plugin trae su propio color y radio (ya puestos a menta y 24px
   en sus ajustes). Aquí van el fondo, la tipografía y el ancho, que
   no son configurables. */
.gtc-banner, .gtc-modal-box {
  --gtc-accent-ink: #0B4034;              /* menta de fondo pide tinta verde, no blanca */
  background: linear-gradient(165deg, #0B4034 0%, #09261F 100%) !important;
  color: #FBFAF7 !important;
  font-family: 'Archivo', sans-serif;
  border: 1px solid rgba(168,220,203,.16);
  box-shadow: 0 26px 60px rgba(9,38,31,.34);
  max-width: 420px;
}
.gtc-banner-title, .gtc-modal-head strong {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-size: 21px !important; font-weight: 500 !important;
  letter-spacing: -.02em; line-height: 1.15;
}
.gtc-banner-text, .gtc-modal p { color: rgba(251,250,247,.74) !important; font-size: 14px; line-height: 1.6; }
.gtc-banner-text a, .gtc-modal a { color: #A8DCCB !important; }
.gtc-btn { font-family: 'Archivo', sans-serif; border-radius: 999px !important; font-size: 14.5px !important; }
.gtc-accept, .gtc-reject, .gtc-save { color: #0B4034 !important; }
.gtc-prefs-open { color: rgba(251,250,247,.8) !important; border-color: rgba(251,250,247,.34) !important; }
.gtc-prefs-open:hover { background: rgba(251,250,247,.1) !important; }

/* ── El enlace suelto que el plugin imprime al final del body ──
   Salía en una franja blanca bajo el pie, fuera de la maqueta. Se
   oculta: el enlace vive ahora en la línea legal del pie. */
.gtc-footer-link { display: none !important; }

/* Preferencias, igual que el resto de enlaces legales */
.ll-footer .ll-prefs { cursor: pointer; }

/* ── Selector de idioma en el pie ─────────────────────────────
   GTranslate pinta enlaces sueltos con su propio estilo. Se visten
   como píldoras de marca sobre el verde del pie. */
/* Sin borde propio: el bloque de columnas ya cierra con una línea. */
.ll-idiomas { border-top: 0; }
.ll-idiomas .gtranslate_wrapper,
.ll-idiomas .switcher {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.ll-idiomas a, .ll-idiomas .gt_switcher a {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(11,58,48,.22);
  background: rgba(255,255,255,.55);
  color: rgba(11,58,48,.82) !important;
  font-family: 'Archivo', sans-serif;
  font-size: 13px; font-weight: 500;
  text-decoration: none !important;
  line-height: 1.4;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.ll-idiomas a:hover {
  background: #0B4034; border-color: #0B4034; color: #FBFAF7 !important;
}
/* El idioma activo se marca */
.ll-idiomas a.gt-current-lang, .ll-idiomas a.selected {
  background: #0B4034; border-color: #0B4034; color: #FBFAF7 !important;
}
/* Fuera la barra flotante y el aviso de Google, que rompen la maqueta */
.goog-te-banner-frame, #goog-gt-tt, .skiptranslate iframe { display: none !important; }
body { top: 0 !important; }
.gt_float_switcher { display: none !important; }

/* ── Kit Digital ──────────────────────────────────────────────
   Publicidad obligatoria de la subvención. El manual de marca exige
   que se vean legibles y SIN alterar, así que aquí no va opacidad,
   ni filtros, ni atenuado al pasar por encima. Solo tamaño. */
/* Los contenedores de Elementor nacen al 100%: sin esto los dos
   bloques de la fila no caben juntos y el logo cae a la línea de
   abajo, pegado a la izquierda en vez de al margen derecho. */
@media (min-width: 768px) {
  .ll-idiomas > .e-con-inner > .e-con { width: auto !important; }
}
.ll-kitdigital { align-self: center; }
.ll-kitdigital img {
  width: 100%;
  max-width: 380px;
  height: auto;
  display: block;
}
@media (max-width: 767px) {
  .ll-idiomas { flex-direction: column; align-items: flex-start !important; gap: 22px !important; }
  .ll-kitdigital img { max-width: 300px; }
}/* End custom CSS */