#contenido{scroll-margin-top:calc(var(--headerbar-h) + 12px)}
#contenido>.container{padding:32px 0}
.fullwidth-image{position:relative;width:100%;min-height:300px;background-image:var(--bg-img,none);background-size:cover;background-position:center;background-attachment:fixed}
.fullwidth-image .overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff;text-align:center;background:rgba(0,0,0,.35);padding:2rem}

.hero-carousel{width:100%;height:calc(100vh - 200px);position:relative;overflow:hidden;margin-bottom:24px}
.carousel-container{width:100%;height:100%;position:relative}
.carousel-slide{width:100%;height:100%;position:absolute;inset:0;opacity:0;transition:opacity .8s ease-in-out}
.carousel-slide.active{opacity:1}
.carousel-slide img{width:100%;height:100%;object-fit:cover}

/* Controles */
.carousel-control{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.4);border:none;color:#fff;font-size:2rem;padding:.5rem 1rem;cursor:pointer;z-index:2;border-radius:50%;transition:background .3s;display:none}
.carousel-control:hover{background:rgba(0,0,0,.7)}
.carousel-control.prev{left:20px}
.carousel-control.next{right:20px}

/* Indicadores */
.carousel-indicators{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);display:flex;gap:10px}
.carousel-indicators button{width:12px;height:12px;border:none;border-radius:50%;background:rgba(255,255,255,.6);cursor:pointer;transition:background .3s}
.carousel-indicators button.active{background:#fff}

/* Servicios */
.servicios-container{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(100px,auto);gap:8px;grid-template-areas:"a a a a b b" "c c d d e e" "f f f g g g"}
.servicios-container>:nth-child(1){grid-area:a} /* Lectura de contador (ancho 4) */
.servicios-container>:nth-child(2){grid-area:b} /* Altas/Bajas */
.servicios-container>:nth-child(3){grid-area:c}
.servicios-container>:nth-child(4){grid-area:d}
.servicios-container>:nth-child(5){grid-area:e} /* Facturación */
.servicios-container>:nth-child(6){grid-area:f} /* Avisos… */
.servicios-container>:nth-child(7){grid-area:g}

.servicios-container.--expand-altas{grid-template-areas:"a a a b b b" "c d e b b b" "f f f g g g"}

.servicios-element{position:relative;height:220px;cursor:pointer;overflow:hidden;transform-origin:top left;transition:transform .2s ease;text-align:left}
.servicios-element img{position:absolute;width:130px;top:8px;left:8px}
.servicios-container.--expand-altas>:nth-child(2){z-index:1}

.servicios-element a{position:absolute;color:#fff;font-size:1.5rem;font-weight:900;display:flex;align-items:flex-end;justify-content:flex-end;flex-direction:row-reverse;width:100%;height:100%;padding:16px}

.servicios-arrow{position:absolute;right:16px;bottom:0}
.servicios-arrow i{color:#fff;font-size:2.5rem}

.servicios-element:nth-child(1){--bg-color:linear-gradient(rgba(0,162,255,.6),rgba(0,162,255,.6))}
.servicios-element:nth-child(2){--bg-color:linear-gradient(rgba(0,200,210,.6),rgba(0,200,210,.6))}
.servicios-element:nth-child(3){--bg-color:linear-gradient(rgba(130,255,255,.6),rgba(130,255,255,.6))}
.servicios-element:nth-child(4){--bg-color:linear-gradient(rgba(25,65,130,.6),rgba(25,65,130,.6))}
.servicios-element:nth-child(5){--bg-color:linear-gradient(rgba(155,110,255,.6),rgba(155,110,255,.6))}
.servicios-element:nth-child(6){--bg-color:linear-gradient(rgba(0,200,210,.6),rgba(0,200,210,.6))}
.servicios-element:nth-child(7){--bg-color:linear-gradient(rgba(0,162,255,.6),rgba(0,162,255,.6))}

.servicios-element::before{content:"";position:absolute;inset:0;background-image:var(--bg-color,none),var(--bg-img,none);background-position:center center,center center;background-repeat:no-repeat,no-repeat;background-size:cover,cover;transition:transform .5s ease;z-index:0;transform:scale(1)}
.servicios-element:hover::before{transform:scale(1.2)}

/* evita que el hover del fondo interfiera mientras anima */
.servicios-element.is-animating{pointer-events:none}
.servicios-element.is-animating::before{transition:none !important}

/* el ítem Altas/Bajas */
.servicios-element.altas-bajas{transform-origin:bottom left;will-change:transform;overflow:hidden}
.servicios-element.altas-bajas.is-open-altas{height:448px}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){.servicios-element{transition:none !important}}

/* Marquee */
.moving_slogan{width:100%;overflow:hidden;white-space:nowrap;background:#fff;line-height:1;padding:10px 0;font-size:0;position:relative}
.slogan_track{display:inline-flex;white-space:nowrap;will-change:transform;animation:marquee 40s linear infinite}
.slogan_track span{font-size:60px;font-weight:900;color:#0b1a2f;padding:0 2rem;white-space:nowrap}
@keyframes marquee{0%{transform:translateX(100vw)}100%{transform:translateX(-100%)}}

/* H2 */
.container h2{display:flex;align-items:flex-end;gap:16px;font-size:30px;font-weight:600;letter-spacing:-2px;color:var(--ink);margin:0 0 20px;line-height:1.2}
.container h2::after{content:"";flex-grow:1;height:8px;background-color:var(--blue);border-radius:2px;transform:translateY(-7px)}

/* =========================
   @media (compact + grouped)
   ========================= */
@media (max-width:1024px){
  .servicios-container{grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(110px,auto);gap:10px;grid-template-areas:"a a" "b c" "d e" "f f" "g g"}
}
@media (max-width:768px){
  .hero{min-height:clamp(240px,46vh,400px)}
  .fullwidth-image{min-height:clamp(220px,40vh,400px)}
  .servicios-element{background-size:cover}
}
@media (max-width:600px){
  .servicios-container{grid-template-columns:1fr;grid-auto-rows:minmax(110px,auto);gap:10px;grid-template-areas:"a" "b" "c" "d" "e" "f" "g"}
}