/* ==========================================================
   LUMAR — SERVICIOS DE PORTADA EN MÓVIL
   Cuadrícula 2 × 2 + botón inferior
   No afecta a tablet ni escritorio
   ========================================================== */

@media only screen and (max-width: 767px) {

  /* ----------------------------------------------------------
     1. CONTENEDOR GENERAL
     Se amplía respecto al contenedor estrecho de Betheme.
     ---------------------------------------------------------- */

  #Content .mcb-wrap-dc81b32b2 {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #Content .mcb-wrap-dc81b32b2 > .mcb-wrap-inner {
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    align-items: stretch !important;

    width: min(calc(100vw - 24px), 520px) !important;
    max-width: 520px !important;

    gap: 10px !important;
    margin: 0 !important;
    padding: 0 0 24px !important;
    box-sizing: border-box !important;
  }

  /* ----------------------------------------------------------
     2. CUATRO COLUMNAS DE SERVICIOS
     Se recuperan explícitamente para evitar reglas anteriores.
     ---------------------------------------------------------- */

  #Content .mcb-wrap-dc81b32b2 .mcb-item-3e5fb1f4a,
  #Content .mcb-wrap-dc81b32b2 .mcb-item-3adee7416,
  #Content .mcb-wrap-dc81b32b2 .mcb-item-f256d9934,
  #Content .mcb-wrap-dc81b32b2 .mcb-item-fa6194f6c {
    display: block !important;
    float: none !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* ----------------------------------------------------------
     3. TARJETAS CUADRADAS
     ---------------------------------------------------------- */

  #Content .mcb-wrap-dc81b32b2
  .column_hover_color:not(.mcb-item-98869f6ae)
  .mcb-column-inner {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
  }

  #Content .mcb-wrap-dc81b32b2
  .column_hover_color:not(.mcb-item-98869f6ae)
  .hover_color {
    display: block !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    aspect-ratio: 1 / 1 !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #Content .mcb-wrap-dc81b32b2
  .column_hover_color:not(.mcb-item-98869f6ae)
  .hover_color_bg {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #Content .mcb-wrap-dc81b32b2
  .column_hover_color:not(.mcb-item-98869f6ae)
  a.title {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* ----------------------------------------------------------
     4. DISTRIBUCIÓN INTERIOR
     Icono, texto y línea dentro del cuadrado.
     ---------------------------------------------------------- */

  #Content .mcb-wrap-dc81b32b2
  .column_hover_color:not(.mcb-item-98869f6ae)
  .hover_color_wrapper {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;

    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: clamp(8px, 2.6vw, 14px) !important;

    text-align: center !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* ----------------------------------------------------------
     5. CONTENEDOR DEL ICONO
     Evita que la línea decorativa reduzca su altura.
     ---------------------------------------------------------- */

  #Content .mcb-wrap-dc81b32b2
  .column_hover_color:not(.mcb-item-98869f6ae)
  .hover_color_wrapper > .image_frame {
    display: block !important;
    flex: 0 0 clamp(42px, 14vw, 62px) !important;

    width: clamp(42px, 14vw, 62px) !important;
    max-width: clamp(42px, 14vw, 62px) !important;

    height: clamp(42px, 14vw, 62px) !important;
    min-height: clamp(42px, 14vw, 62px) !important;
    max-height: clamp(42px, 14vw, 62px) !important;

    margin: 0 auto clamp(6px, 2vw, 10px) !important;
    padding: 0 !important;

    opacity: 1 !important;
    visibility: visible !important;

    box-sizing: border-box !important;
    overflow: visible !important;
  }

  #Content .mcb-wrap-dc81b32b2
  .column_hover_color:not(.mcb-item-98869f6ae)
  .image_frame .image_wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
  }

  #Content .mcb-wrap-dc81b32b2
  .column_hover_color:not(.mcb-item-98869f6ae)
  .image_frame img {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    height: 100% !important;
    max-height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;

    opacity: 1 !important;
    visibility: visible !important;
  }

  /* ----------------------------------------------------------
     6. ELIMINA EL DIVISOR VACÍO ENTRE ICONO Y TEXTO
     ---------------------------------------------------------- */

  #Content .mcb-wrap-dc81b32b2
  .column_hover_color:not(.mcb-item-98869f6ae)
  .hover_color_wrapper > hr.no_line {
    display: none !important;
  }

  /* ----------------------------------------------------------
     7. TEXTOS
     Se ajustan automáticamente según el ancho del móvil.
     ---------------------------------------------------------- */

  #Content .mcb-wrap-dc81b32b2
  .column_hover_color:not(.mcb-item-98869f6ae)
  .hover_color_wrapper h4 {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 0 clamp(6px, 1.8vw, 9px) !important;
    padding: 0 !important;

    color: #fff !important;

    font-size: clamp(11.5px, 3.55vw, 15px) !important;
    line-height: 1.08 !important;
    font-weight: 700 !important;

    text-align: center !important;
    white-space: normal !important;

    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;

    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* ----------------------------------------------------------
     8. LÍNEA DECORATIVA
     Se excluye expresamente .image_frame.
     ---------------------------------------------------------- */

  #Content .mcb-wrap-dc81b32b2
  .column_hover_color:not(.mcb-item-98869f6ae)
  .hover_color_wrapper > div:not(.image_frame) {
    display: block !important;
    flex: 0 0 2px !important;

    width: clamp(42px, 13vw, 62px) !important;
    max-width: clamp(42px, 13vw, 62px) !important;

    height: 2px !important;
    min-height: 2px !important;
    max-height: 2px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    box-sizing: border-box !important;
  }

  /* ----------------------------------------------------------
     9. BOTÓN “VER TODOS LOS SERVICIOS”
     Ocupa una fila completa debajo de los cuatro cuadrados.
     ---------------------------------------------------------- */

  #Content .mcb-wrap-dc81b32b2
  > .mcb-wrap-inner
  > .mcb-item-98869f6ae {
    display: block !important;
    float: none !important;

    grid-column: 1 / -1 !important;

    width: 100% !important;
    max-width: none !important;
    height: auto !important;

    margin: 5px 0 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
  }

  #Content .mcb-item-98869f6ae .mcb-column-inner {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }

  #Content .mcb-item-98869f6ae .hover_color,
  #Content .mcb-item-98869f6ae .hover_color_bg {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    aspect-ratio: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    box-sizing: border-box !important;
  }

  #Content .mcb-item-98869f6ae .hover_color_bg {
    display: flex !important;
    justify-content: center !important;
  }

  #Content .mcb-item-98869f6ae a.title {
    display: block !important;

    width: min(100%, 300px) !important;
    height: auto !important;

    margin: 0 auto !important;
    padding: 0 !important;

    background: #d9342b !important;
    border-radius: 4px !important;

    text-decoration: none !important;
    box-shadow: 0 8px 20px rgba(6, 44, 70, 0.18);

    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #Content .mcb-item-98869f6ae a.title:hover {
    background: #1185c2 !important;
  }

  #Content .mcb-item-98869f6ae .hover_color_wrapper {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;

    width: 100% !important;
    height: auto !important;
    min-height: 56px !important;

    gap: 13px !important;

    margin: 0 !important;
    padding: 11px 18px !important;

    text-align: center !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Se oculta el texto original dividido en varias líneas */
  #Content .mcb-item-98869f6ae .hover_color_wrapper h4 {
    display: block !important;
    flex: 0 1 auto !important;

    max-width: calc(100% - 32px) !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 0 !important;
    line-height: 1 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
  }

  /* Texto nuevo en una única línea */
  #Content .mcb-item-98869f6ae .hover_color_wrapper h4::before {
    content: "Ver todos los servicios";

    color: #fff !important;

    font-size: clamp(13px, 4vw, 16px) !important;
    line-height: 1 !important;
    font-weight: 700 !important;

    white-space: nowrap !important;
  }

  #Content .mcb-item-98869f6ae .hover_color_wrapper h4 br,
  #Content .mcb-item-98869f6ae .hover_color_wrapper > div {
    display: none !important;
  }

  #Content .mcb-item-98869f6ae .hover_color_wrapper i {
    display: inline-block !important;
    flex: 0 0 auto !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #fff !important;
    font-size: 18px !important;
    line-height: 1 !important;
  }
}

/* ==========================================================
   AJUSTE EXTRA PARA MÓVILES MUY ESTRECHOS: 320–359 PX
   ========================================================== */

@media only screen and (max-width: 359px) {

  #Content .mcb-wrap-dc81b32b2 > .mcb-wrap-inner {
    width: calc(100vw - 16px) !important;
    gap: 8px !important;
  }

  #Content .mcb-wrap-dc81b32b2
  .column_hover_color:not(.mcb-item-98869f6ae)
  .hover_color_wrapper {
    padding: 7px !important;
  }

  #Content .mcb-wrap-dc81b32b2
  .column_hover_color:not(.mcb-item-98869f6ae)
  .hover_color_wrapper > .image_frame {
    flex-basis: 42px !important;
    width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    margin-bottom: 6px !important;
  }

  #Content .mcb-wrap-dc81b32b2
  .column_hover_color:not(.mcb-item-98869f6ae)
  .hover_color_wrapper h4 {
    margin-bottom: 6px !important;
    font-size: 11.5px !important;
    line-height: 1.05 !important;
  }

  #Content .mcb-item-98869f6ae .hover_color_wrapper {
    min-height: 52px !important;
    padding: 10px 12px !important;
    gap: 9px !important;
  }

  #Content .mcb-item-98869f6ae .hover_color_wrapper h4::before {
    font-size: 13px !important;
  }

  #Content .mcb-item-98869f6ae .hover_color_wrapper i {
    font-size: 16px !important;
  }
}
/* =====================================================
   LUMAR · FADE IN MÓVIL CORREGIDO
   ===================================================== */

@media only screen and (max-width: 767px) {

    /* Primera fila */
    .mcb-wrap-dc81b32b2 > .mcb-wrap-inner >
    .column:nth-child(1),

    .mcb-wrap-dc81b32b2 > .mcb-wrap-inner >
    .column:nth-child(2) {
        animation: lumarServiciosFadeIn 0.7s ease-out 0.15s both !important;
        will-change: opacity, transform;
    }

    /* Segunda fila: incluye Media tensión */
    .mcb-wrap-dc81b32b2 > .mcb-wrap-inner >
    .column:nth-child(3),

    .mcb-wrap-dc81b32b2 > .mcb-wrap-inner >
    .column:nth-child(4) {
        animation: lumarServiciosFadeIn 0.7s ease-out 0.55s both !important;
        will-change: opacity, transform;
    }

    /* Botón Ver todos los servicios */
    .mcb-wrap-dc81b32b2 > .mcb-wrap-inner >
    .column:nth-child(5) {
        animation: lumarServiciosFadeIn 0.65s ease-out 0.95s both !important;
        will-change: opacity, transform;
    }
}

@keyframes lumarServiciosFadeIn {
    from {
        opacity: 0;
        transform: translateY(26px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mcb-wrap-dc81b32b2 > .mcb-wrap-inner > .column {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}