/* ============================================================================
   Vemsa | Ajustes sobre la plantilla
   Se carga DESPUÉS de assets/sass/style.css, así que sus reglas ganan sobre
   las del tema. Todo cambio al diseño original va aquí, para no tocar la hoja
   de estilos de la plantilla.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   Portada · acordeón de servicios
   El acordeón horizontal del tema, en una sola fila con los 10 servicios.

   El bloque original se calculó para 6 tarjetas repartiendo flex 3 a la
   abierta y 1 a las demás, con 20px de separación. Con 10 eso dejaba la
   tarjeta abierta en 240px, ilegible. Aquí se estrecha la separación a 10px y
   se sube la apertura a flex 6: las cerradas quedan en 70-88px (listones
   delgados, sólo el título vertical) y la abierta en 420-490px, algo más
   holgada incluso que en el diseño de 6 tarjetas.

   Para agregar un servicio basta añadir su .service-items; el reparto se
   recalcula solo, aunque a partir de ~12 convendría revisar los tamaños.
   -------------------------------------------------------------------------- */
.wpo-service-section .service-wrap {
    gap: 10px;
}

/* gsap-script.js escribe flex en línea al hacer clic (3 en la abierta, 1 en el
   resto). Con !important la proporción la manda esta hoja y la transición la
   hace el navegador. */
.wpo-service-section .service-wrap .service-items {
    transition: flex 0.35s ease;
}

.wpo-service-section .service-wrap .service-items:not(.active) {
    flex: 1 !important;
    padding: 6px;
    border-radius: 16px;
}

.wpo-service-section .service-wrap .service-items.active {
    flex: 6 !important;
}

/* Los títulos de Vemsa son más largos que los de la plantilla; a 28px se
   partían en dos renglones y no cabían a lo ancho del listón. */
.wpo-service-section .service-wrap .service-items .service-default .service-bg h3 {
    font-size: 17px;
    line-height: 34px;
}

/* El texto de la tarjeta abierta tenía un ancho fijo de 400px que se salía del
   recuadro; aquí es fluido. */
.wpo-service-section .service-wrap .service-items .service-expanded .service-content {
    width: auto;
    left: 26px;
    right: 26px;
    bottom: 36px;
}

.wpo-service-section .service-wrap .service-items .service-expanded .service-content h4 {
    font-size: 21px;
    line-height: 1.3;
    margin-bottom: 10px;
    overflow-wrap: break-word;
}

.wpo-service-section .service-wrap .service-items .service-expanded .service-content p {
    font-size: 15px;
    line-height: 1.55;
    max-width: 100%;
}

/* Entre 992 y 1199px el contenedor baja a 960px y el listón se queda en 58px. */
@media (max-width: 1199px) {
    .wpo-service-section .service-wrap .service-items .service-default .service-bg h3 {
        font-size: 15px;
        line-height: 30px;
    }
}

/* Por debajo de 991px el tema apila las tarjetas en vertical y el título
   vuelve a leerse en horizontal. Con 10 el alto del tema (650px) deja las
   cerradas en 37px y recorta la abierta. */
@media (max-width: 991px) {
    .wpo-service-section .service-wrap {
        height: 900px;
    }

    .wpo-service-section .service-wrap .service-items .service-default .service-bg h3 {
        font-size: 18px;
        line-height: 1.3;
    }
}

@media (max-width: 575px) {
    .wpo-service-section .service-wrap {
        height: 820px;
    }

    .wpo-service-section .service-wrap .service-items .service-default .service-bg h3 {
        font-size: 16px;
    }

    .wpo-service-section .service-wrap .service-items .service-expanded .service-content h4 {
        font-size: 18px;
    }
}

/* ----------------------------------------------------------------------------
   Portada · Sobre nosotros
   El bloque está pensado para una foto vertical: la columna de texto mide poco
   más de 1000px de alto y la imagen la acompaña. La foto actual llega casi
   cuadrada (1304x1206) y a lo ancho de la columna se quedaba en 636px, con un
   hueco grande debajo. Con 4:5 vuelve a ~860px, prácticamente el alto que
   tenía el diseño, y el recorte se come sólo cielo.
   -------------------------------------------------------------------------- */
.wpo-about-section-s3 .about-left .about-image img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 10px;
}

/* ----------------------------------------------------------------------------
   Páginas de servicio
   -------------------------------------------------------------------------- */

/* Las fotos llegan en proporciones muy dispares (desde 1608x817 apaisada hasta
   568x855 vertical). Sin esto, una vertical se estira a todo el ancho de la
   columna y empuja el texto varios miles de píxeles hacia abajo. */
.service-single-wrap .title-image img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
}

/* Servicios con varias fotos (UPS y Pruebas VLF): carrusel en lugar de imagen
   fija, montado por assets/js/vemsa-slider.js sobre el Owl Carousel que ya
   trae la plantilla.

   Las fotos se generaron recortadas a 4:3, un poco más altas que el 16:9 del
   resto: casi todas vienen en vertical desde el teléfono y a 16:9 se perdía
   demasiado. Las del equipo VLF eran capturas de video con barras negras
   arriba y abajo, que se recortaron al generarlas.

   Owl mantiene el .owl-carousel en display:none hasta que termina de montar,
   así que no se ve el apilado de las fotos mientras carga. */
.service-single-wrap .title-image .vemsa-slider img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 10px;
}

/* Owl deja el contenedor de flechas aunque se inicialice con nav:false, y el
   tema se lo pinta encima de la foto. La navegación son los puntos. */
.service-single-wrap .title-image .vemsa-slider .owl-nav {
    display: none;
}

/* Mismos puntos naranjas que usa el carrusel de la portada. */
.service-single-wrap .title-image .vemsa-slider .owl-dots {
    text-align: center;
    margin-top: 16px;
}

.service-single-wrap .title-image .vemsa-slider .owl-dots button {
    margin: 5px;
    padding: 0;
    background: transparent;
    border: 1px solid #E8791E;
    width: 10px;
    height: 14px;
    border-radius: 100px;
}

.service-single-wrap .title-image .vemsa-slider .owl-dots button.active {
    background: #E8791E;
}

/* Varios servicios describen su alcance con una lista en lugar de un párrafo
   (proyectos, transformadores, estudios). Misma palomita naranja que usa la
   barra lateral del tema, pero a un tamaño acorde al cuerpo de texto. */
.service-single-wrap .service-desc-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

.service-single-wrap .service-desc-list li {
    position: relative;
    padding-left: 32px;
    margin-bottom: 12px;
    font-size: 18px;
    line-height: 1.6;
    color: #33210E;
}

.service-single-wrap .service-desc-list li:last-child {
    margin-bottom: 0;
}

.service-single-wrap .service-desc-list li::before {
    position: absolute;
    left: 0;
    top: 4px;
    font-family: "themify";
    content: "\e64c";
    font-size: 13px;
    color: #E8791E;
}

@media (max-width: 575px) {
    .service-single-wrap .service-desc-list li {
        font-size: 16px;
        padding-left: 28px;
    }
}

/* ----------------------------------------------------------------------------
   Portada · galería "Nuestro trabajo"
   Son 40 fotos de obra tomadas con teléfono, en proporciones mezcladas
   (verticales 1200x1600, apaisadas 1600x1200 y alguna casi cuadrada). El tema
   sólo les pone width:100%, así que cada tarjeta tomaba un alto distinto y la
   fila de tres quedaba escalonada. Con un cuadrado y recorte centrado, las
   tres de la fila miden lo mismo.

   Los archivos ya vienen recortados a cuadrado (820 -> 700px) para no cargar
   píxeles que el carrusel nunca muestra: las enseña a 510px como máximo.
   -------------------------------------------------------------------------- */
.wpo-project-section .project-wrapper .project-card .image img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* El carrusel dibuja un punto por foto (script.js, dots:true). Con las 4
   originales era una fila discreta; con 40 son tres filas de puntos que pesan
   más que la propia galería. Se avanza sola y se puede arrastrar, así que
   sobran. */
.wpo-project-section .project-slider .owl-dots {
    display: none;
}

/* ----------------------------------------------------------------------------
   Contacto
   Al quitar el mapa, el formulario quedó en una columna centrada. El tema le
   fija un ancho máximo de 484px, así que hay que centrarlo dentro de ella.
   -------------------------------------------------------------------------- */
.contact-page .contact-wrap .contact-right {
    margin-left: auto;
    margin-right: auto;
}