/* ============================================================
   SERVEISDELSSERVEIS.css
   Diseño de los "servicios de servicios": fotografia-y-video,
   seguimiento-de-obras, renders, inmobiliarias, eventos (dron)
   y eventos, videos-corporativos, spots-publicitarios (productora).

   Algunas piezas (heroSS_inv, vídeos hover, encuadre Gutenberg,
   botones círculo) están duplicadas con Serveis.css a propósito:
   esta plantilla no carga ese archivo. Si se prefiere evitar la
   duplicación, se puede extraer a un tercer archivo compartido
   más adelante.
   ============================================================ */


/* ─────────────────────────────────────────────
   HERO SS (normal, no invertido)
   ───────────────────────────────────────────── */

.heroSS {
    display: flex;
    align-items: stretch;
    padding-top: 50px;
    overflow: hidden;
    margin-bottom: 2rem;
}
.heroSS .bloctext_L_SS {
    flex: 0 0 50%;
    padding: 4rem 5rem 4rem 8vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.heroSS > .wp-block-column:last-child {
    flex: 1 !important;
    flex-basis: unset !important;
    margin-right: calc(-1 * (100vw - 100%) / 2) !important;
    overflow: hidden;
    padding: 0 !important;
    display: flex;
    align-items: stretch;
}
.heroSS .img_bloctext_R_SS {
    flex: 1;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
}
.heroSS .img_bloctext_R_SS video,
.heroSS .img_bloctext_R_SS img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: unset !important;
    object-fit: cover;
    object-position: center;
    display: block;
    flex: 1;
}
.heroSS .img_bloctext_R_SS figcaption { display: none; }
.heroSS .leermas { display: inline-block; position: relative; }
.heroSS .cont-leermas { align-self: flex-start; margin-left: 3rem; }


/* ─────────────────────────────────────────────
   ACORDEÓN DE SERVICIOS RELACIONADOS
   ───────────────────────────────────────────── */

.the-content h3 { margin-top: 0rem !important; }
.bloc_list_hv_SS { padding: 0 8vw; }
.desplegable_SS {
    border-bottom: 1px solid #ddd;
    padding: 0.8rem 0;
    display: flex !important;
    align-items: center !important;
    cursor: pointer;
    height: 90px;
    overflow: hidden;
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.bloc_list_hv_SS .desplegable_SS:first-of-type { border-top: 1px solid #ddd; }
.desplegable_SS:hover {
    height: 220px;
    align-items: flex-start !important;
    padding-top: 1.2rem;
}
.desplegable_SS > .wp-block-column:first-child {
    flex: 0 0 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    overflow: hidden;
    transition: flex 0.5s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.desplegable_SS:hover > .wp-block-column:first-child {
    flex: 0 0 300px !important;
    max-width: 300px !important;
}
.desplegable_SS figure {
    margin: 0;
    overflow: hidden;
    border-radius: 2px;
    width: 70px;
    height: 70px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.desplegable_SS:hover figure { width: 300px; height: 180px; }
.desplegable_SS figure img,
.desplegable_SS figure picture img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 2px;
}
.desplegable_SS > .wp-block-column:last-child {
    flex: 1 !important;
    min-width: 0 !important;
    padding-left: 1.5rem !important;
}
.desplegable_SS p {
    overflow: hidden;
    opacity: 0;
    max-height: 0;
    max-width: 40%;
    margin: 0 !important;
    margin-top: 0.6rem !important;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    line-height: 1.6;
}


/* ─────────────────────────────────────────────
   HERO SS INVERTIDO
   (compartido con Serveis.css — ver nota arriba)
   ───────────────────────────────────────────── */

.heroSS_inv {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    margin-top: 8rem;
    margin-bottom: 5rem;
}
.heroSS_inv .img_bloctext_L_SS {
    flex: 1 !important;
    flex-basis: unset !important;
    margin-left: calc(-1 * (100vw - 100%) / 2) !important;
    overflow: hidden;
    padding: 0 !important;
    position: relative;
    min-height: 100%;
    align-self: stretch;
}
.heroSS_inv .img_bloctext_L_SS .wp-block-video {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.heroSS_inv .img_bloctext_L_SS .wp-block-video video {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: unset !important;
    object-fit: cover;
    object-position: center;
    display: block !important;
}
.heroSS_inv .img_bloctext_L_SS .wp-block-video figcaption { display: none; }
.heroSS_inv .bloctext_R_SS {
    flex: 0 0 50% !important;
    padding: 3rem 8vw 3rem 5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.heroSS_inv .leermas { display: inline-block; position: relative; }
.heroSS_inv .cont-leermas { align-self: flex-start; margin-left: 3rem; }


/* ─────────────────────────────────────────────
   CARRUSEL DJI (pestañas con crossfade)
   ───────────────────────────────────────────── */

.list_dji_SS {
    padding: 2rem 8vw 3rem 8vw;
    margin-top: 4rem !important;
    margin-bottom: 2rem !important;
    /* Evitar que display:grid del tema rompa el carrusel */
    display: block !important;
}
.list_dji_SS h2 { margin-bottom: 2rem; }
.list_dji_SS .tresblocs { display: none !important; }
.dji_carousel {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.dji_carousel__video {
    width: 65%;
    aspect-ratio: 18 / 9;
    border-radius: 2px;
    overflow: hidden;
    background: #000;
    margin-bottom: 1.5rem;
}
.dji_carousel__video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 2px;
}
.dji_carousel__tabs {
    display: flex;
    width: 55%;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 1.2rem;
}
.dji_carousel__tab {
    flex: 1;
    padding: 0.8rem 0.5rem;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: #aaa;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.3s ease, border-color 0.3s ease;
    user-select: none;
    word-break: normal;
    hyphens: none;
    overflow-wrap: normal;
}
.dji_carousel__tab:hover { color: #333; }
.dji_carousel__tab.active { color: #1e1e1e; border-bottom: 2px solid #1e1e1e; }
.dji_carousel__desc {
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    line-height: 1.7;
    color: #444;
    width: 40%;
    margin: 0 auto;
    min-height: 3em;
    transition: opacity 0.3s ease;
}


/* ─────────────────────────────────────────────
   VÍDEOS HOVER
   (compartido con Serveis.css)
   ───────────────────────────────────────────── */

.hover-overlay video { pointer-events: none; }


/* ─────────────────────────────────────────────
   ENCUADRE COLUMNAS GUTENBERG
   (compartido con Serveis.css)
   ───────────────────────────────────────────── */

@media (min-width: 782px) {
    .wp-block-columns:not(.is-not-stacked-on-mobile):not(:has(.dji_carousel)) > .wp-block-column {
        display: grid;
        flex-basis: 0;
        flex-grow: 1;
    }
    .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column[style*=flex-basis] {
        flex-grow: 0;
    }
}


/* ─────────────────────────────────────────────
   CARRUSEL "OTROS SERVICIOS" (bucle infinito)
   ───────────────────────────────────────────── */

.textcarrusel_os_SS { width: 100%; }
.textcarrusel_os_SS .wp-block-column:nth-child(2) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.otrossevicios_SS {
    overflow: hidden;
    align-items: center !important;
    padding: 4rem 0;
    margin-top: 4rem;
    margin-bottom: 2rem;
}
.otrossevicios_SS > .wp-block-column:first-child {
    padding: 0 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.otrossevicios_SS > .wp-block-column:first-child h2 { font-size: 1.6rem; margin-bottom: 1rem; }
.otrossevicios_SS > .wp-block-column:first-child p { font-size: 0.9rem; line-height: 1.7; color: #444; }
.oserv_nav { margin-top: 2rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.8rem; }
.oserv_btns { display: flex; gap: 1rem; align-items: center; }
.oserv_prev, .oserv_next {
    background: none; border: none; font-family: 'Poppins', sans-serif;
    font-size: 1.8rem; cursor: pointer; color: #1e1e1e; padding: 0;
    line-height: 1; transition: transform 0.2s ease;
}
.oserv_prev:hover { transform: translateX(-3px); }
.oserv_next:hover { transform: translateX(3px); }
.oserv_dots { display: flex; gap: 6px; }
.oserv_dot { width: 8px; height: 8px; border-radius: 2px; background: #ccc; cursor: pointer; transition: background 0.3s ease; }
.oserv_dot.active { background: #1e1e1e; }
.otrossevicios_SS > .wp-block-column:last-child { padding-left: 2rem; }
.oserv_track_wrap { overflow: hidden; width: 100%; }
.oserv_track { display: flex; gap: 1.2rem; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; }
.oserv_item { flex: 0 0 calc(36% - 0.6rem); text-decoration: none; color: #1e1e1e; display: block; }
.oserv_img_wrap { overflow: hidden; border-radius: 2px; aspect-ratio: 3 / 4; margin-bottom: 1.2rem; position: relative; }
.oserv_img_wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oserv_label {
    margin: 0;
    font-family: 'Poppins', sans-serif; font-size: 1rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em; display: flex;
    align-items: center; gap: 0.4rem; transition: transform 0.3s ease, gap 0.3s ease;
}
.oserv_arrow { font-size: 1rem; display: inline-block; transition: transform 0.3s ease; }
.oserv_item:hover .oserv_label { transform: translateX(2rem); gap: 0.7rem; }
.oserv_item, .oserv_item:hover, .oserv_item:visited { text-decoration: none !important; }


/* ─────────────────────────────────────────────
   BOTONES CÍRCULO
   (compartido con Serveis.css)
   ───────────────────────────────────────────── */

.cont-leermas.negre { display: block; text-align: left; }
.cont-leermas.negre .leermas { display: inline-block !important; position: relative; }
.cont-leermas.centrat { display: block; text-align: center; }
.cont-leermas.centrat .leermas { display: inline-block !important; position: relative; }

/* Corregido: faltaban los puntos entre clases (no aplicaba nunca) */
.cont-leermas.animated-button.negre.centrat { width: 80%; }


/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */

/* ── TABLET (≤ 1024px) ── */
@media screen and (max-width: 1024px) {
    .heroSS { flex-direction: column; padding-top: 80px; }
    .heroSS .bloctext_L_SS { flex: unset; width: 100%; padding: 2rem 6vw; }
    .heroSS > .wp-block-column:last-child { flex: unset !important; width: 100%; margin-right: 0 !important; aspect-ratio: 16 / 9; }
    .heroSS_inv { flex-direction: column-reverse; }
    .heroSS_inv .img_bloctext_L_SS { flex: unset !important; width: 100%; margin-left: 0 !important; position: relative; min-height: unset; aspect-ratio: 16 / 9; }
    .heroSS_inv .img_bloctext_L_SS .wp-block-video { position: relative; inset: unset; aspect-ratio: 16 / 9; }
    .heroSS_inv .img_bloctext_L_SS .wp-block-video video { aspect-ratio: 16 / 9 !important; height: auto !important; }
    .heroSS_inv .bloctext_R_SS { flex: unset !important; width: 100%; padding: 2rem 6vw; }
    .bloc_list_hv_SS { padding: 0 4vw; }
    .desplegable_SS p { max-width: 70%; }
    .dji_carousel__video { width: 85%; }
    .dji_carousel__tabs { width: 85%; }
    .dji_carousel__desc { width: 70%; }
    .otrossevicios_SS { flex-direction: column !important; padding: 2rem 4vw; }
    .otrossevicios_SS > .wp-block-column:first-child { width: 100%; padding: 0 0 2rem 0; }
    .otrossevicios_SS > .wp-block-column:last-child { width: 100%; padding-left: 0; }
    .oserv_nav { align-items: center; }
    .oserv_item { flex: 0 0 calc(50% - 0.6rem); }
}

/* ── MÓVIL (≤ 768px) ── */
@media screen and (max-width: 768px) {
    h1 { font-size: 1.6rem !important; margin-top: 0.3rem !important; margin-bottom: 0.5rem !important; }
    h2 { font-size: 1.3rem !important; margin-top: 0.3rem !important; margin-bottom: 0.5rem !important; }
    p  { margin-bottom: 0.6rem !important; }

    .heroSS { padding-top: 60px !important; margin-bottom: 0.5rem; margin-top: 0; }
    .heroSS .bloctext_L_SS { padding: 1.2rem 5vw !important; }
    .heroSS .cont-leermas { margin-left: 0; }
    .heroSS_inv { margin-bottom: 0.5rem; margin-top: 0.5rem; }
    .heroSS_inv .bloctext_R_SS { padding: 1.2rem 5vw !important; }
    .heroSS_inv .cont-leermas { margin-left: 0; }

    /* Bloque centrado → izquierda en móvil */
    .blocubic_y_enlz { text-align: left !important; }
    .blocubic_y_enlz h2, .blocubic_y_enlz p { text-align: left !important; }
    .has-text-align-center { text-align: left !important; }

    /* Acordeón */
    .bloc_list_hv_SS { padding: 0 5vw !important; }
    .desplegable_SS { height: auto !important; padding: 0 !important; flex-direction: row; align-items: center !important; overflow: hidden; }
    .desplegable_SS > .wp-block-column:first-child { display: none !important; }
    .desplegable_SS > .wp-block-column:last-child { width: 100%; padding-left: 0 !important; height: auto !important; display: block !important; }
    .desplegable_SS h3 { font-size: 0.95rem !important; padding: 0.8rem 5vw !important; cursor: pointer; margin: 0 !important; display: flex; align-items: center; gap: 0.5rem; }
    .acordeon-icon { font-weight: 400; font-size: 1.1rem; flex-shrink: 0; }
    .desplegable_SS p {
        max-width: 100% !important; max-height: 0 !important; opacity: 0 !important;
        overflow: hidden !important; transition: max-height 0.4s ease, opacity 0.3s ease;
        margin: 0 !important; padding: 0 5vw 0.8rem 5vw !important;
    }
    .desplegable_SS.mobile-open p { max-height: 400px !important; opacity: 1 !important; }

    /* Lista dos columnas → una en móvil */
    .bloctext_R_SS .wp-block-columns { flex-direction: column !important; gap: 0 !important; }
    .bloctext_R_SS .wp-block-columns .wp-block-column { width: 100% !important; flex-basis: 100% !important; padding: 0 !important; margin: 0 !important; }
    .bloctext_R_SS ul { margin-top: 0 !important; margin-bottom: 0 !important; }

    /* DJI carrusel */
    .list_dji_SS { padding: 1rem 5vw !important; margin-top: 1.5rem !important; margin-bottom: 1rem !important; }
    .dji_carousel { align-items: flex-start; }
    .dji_carousel__video { width: 100%; aspect-ratio: 16 / 9; }
    .dji_carousel__tabs { width: 100%; flex-direction: column; border-bottom: none; padding: 0; }
    .dji_carousel__tab { border-bottom: 1px solid #e0e0e0; text-align: left; padding: 0.7rem 0; font-size: 0.8rem; }
    .dji_carousel__tab.active { color: #1e1e1e; border-bottom: 2px solid #1e1e1e; }
    .dji_carousel__desc { width: 100%; text-align: left; padding: 0; margin: 0; min-height: unset; }

    /* Botones */
    .cont-leermas {
        display: flex !important;
        justify-content: center !important;
        margin-top: 1.5rem;
    }
    .cont-leermas .leermas { display: inline-block !important; position: relative !important; }
    .cont-leermas .circle-overlay {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) scaleY(.7) !important;
        pointer-events: none;
        width: 280px !important;
    }
    .cont-leermas path { opacity: 1 !important; stroke-dashoffset: 0 !important; transition: none !important; }

    /* Otros servicios */
    .otrossevicios_SS { margin-top: 1.5rem; margin-bottom: 1rem; padding: 1rem 5vw; }
    .oserv_item { flex: 0 0 calc(80% - 0.6rem); }
    .oserv_img_wrap { aspect-ratio: 3 / 2; }
    .oserv_nav { align-items: center; }
}