/* ==========================================================================
   Velvet Home — ajustes propios sobre el template Xinterio.
   Los CSS del theme (resources/themes/default/css/*) NO se tocan: quedan
   intactos y actualizables. Todo override del sitio vive en este archivo,
   que se carga DESPUES de responsive.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero / slider — tipografia mas chica.
   El template define para .pbmit-slider-five .pbmit-title:
     base 60px · 1400:57 · 1280:53 · 1200:50 · 1024:42 · 767:33 · 485:28
   Se baja toda la escala manteniendo la proporcion entre breakpoints.
   -------------------------------------------------------------------------- */
.pbmit-slider-five .pbmit-title {
    font-size: 46px;
    line-height: 1.12;
}
@media (max-width: 1400px) {
    .pbmit-slider-five .pbmit-title { font-size: 43px; }
}
@media (max-width: 1280px) {
    .pbmit-slider-five .pbmit-title { font-size: 40px; }
}
@media (max-width: 1200px) {
    .pbmit-slider-five .pbmit-title { font-size: 38px; }
}
@media (max-width: 1024px) {
    .pbmit-slider-five .pbmit-title { font-size: 32px; }
}
@media (max-width: 767px) {
    .pbmit-slider-five .pbmit-title { font-size: 26px; }
}
@media (max-width: 485px) {
    .pbmit-slider-five .pbmit-title { font-size: 23px; }
}

/* --------------------------------------------------------------------------
   Footer — datos de contacto: iconos en una columna pareja.
   Sin esto cada icono tiene su propio ancho y los textos arrancan en una X
   distinta (direccion, telefono, whatsapp, email y horarios desalineados).
   -------------------------------------------------------------------------- */
.footer-style-1 .pbmit-timelist-list .pbmit-timelist-time {
    display: flex;
    align-items: baseline;
}
.footer-style-1 .pbmit-timelist-list .pbmit-timelist-time > i {
    flex: 0 0 20px;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Antes/Despues del index — comparador a la altura del bloque de texto.
   El theme fija alturas absolutas a .twentytwenty-container (responsive.css:
   38=560px, 1262=630px, 2980=400px) y por encima de 1600px ninguna, con lo cual
   la imagen toma su alto natural (~800px) y descuadra contra el texto (~380px).
   Aca se ata el comparador al alto de la fila, que lo define el bloque de texto:
   la fila es flex con align-items-stretch, asi que la columna ya viene estirada
   y el 100% resuelve. El min-height evita que quede chato si algun dia el texto
   se acorta.
   Acotado a esta seccion y solo al layout de dos columnas (>=1200px): por debajo
   las columnas se apilan, no hay hermano del que tomar altura y el 100%
   colapsaria. Ahi valen las alturas del theme.

   OJO: no poner display:flex en la columna. El plugin deja las dos <img> en
   position:absolute, asi que un flex-item sin contenido en flujo se calcula con
   ancho 0 y el handle se va fuera del contenedor. La columna se deja en block:
   .row ya es flex con align-items:stretch, la altura de la columna esta
   resuelta y el height:100% del contenedor funciona igual.
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
    .before-after-section-eight .twentytwenty-container,
    .before-after-section-eight .twentytwenty-container img {
        height: 100% !important;
        min-height: 400px;
    }
}

/* --------------------------------------------------------------------------
   Header sticky en pantallas chicas.
   El mecanismo es el del propio template: scripts.js:418 le pone la clase
   .sticky-header a .site-header-menu al pasar los 90px de scroll, y base.css:619
   la fija arriba. Pero responsive.css:729 la anula con
   position:relative !important por debajo de 1200px, asi que en movil y tablet
   el header se iba con el scroll.
   Aca se restituye el position:fixed de base.css para ese rango. No se agrega
   ningun comportamiento nuevo: es la misma clase, el mismo JS y el mismo CSS
   que ya usa el escritorio.
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
    .site-header-menu.sticky-header {
        position: fixed !important;
    }
}

/* --------------------------------------------------------------------------
   Header sticky — item activo del menu.
   responsive.css:4424 pinta el item de la pagina actual de blanco
   (rgba(255,255,255,.8)) cuando el header esta pegado, dando por sentado un
   sticky de fondo oscuro. Pero base.css:623 le da fondo blanco, asi que el item
   quedaba blanco sobre blanco: en cada pagina desaparecia justo la entrada del
   menu correspondiente ("Inicio" en la home, "Servicios" en /servicios...).
   Se le devuelve el mismo dorado que usa fuera del sticky (responsive.css:4297).
   -------------------------------------------------------------------------- */
.site-header-menu.sticky-header .site-navigation ul.navigation > li.active > a,
.site-header-menu.sticky-header .site-navigation ul.navigation > li.active > a:after {
    color: var(--pbmit-global-color);
}

/* --------------------------------------------------------------------------
   Index — placas de servicios: la descripcion que aparece al pasar el mouse.
   El theme (shortcode.css:3004 y 3016) le da a .pbmit-service-description un
   alto FIJO de 60px al hacer hover, mas -webkit-line-clamp:2. Eso funciona con
   los textos cortos del template, pero los de Velvet ocupan tres renglones en
   el 70% de ancho que tiene la caja: el line-clamp no llega a recortarlos —lo
   pisa el alto fijo— y el overflow:hidden cortaba el tercer renglon por la
   mitad, dejando media linea de letras asomando.
   Se cambia el alto fijo por un max-height amplio: el texto entra completo y
   la caja crece hacia arriba (el contenedor esta anclado con bottom:30px), sin
   tocar el titulo ni el boton. Se mantiene la animacion, ahora sobre
   max-height, que si es animable —height:auto no lo es—.
   -------------------------------------------------------------------------- */
.pbmit-service-style-2 .pbmit-service-description {
    height: auto;
    max-height: 0;
    -webkit-line-clamp: unset;
}
.pbmit-service-style-2:hover .pbmit-service-description {
    height: auto;
    max-height: 200px;
}

/* ==========================================================================
   PROYECTOS — listado /proyectos y detalle /proyectos/{slug}
   El hero, la banda de datos y el badge son ajustes sobre markup de Xinterio;
   la tarjeta (4) y los bloques del detalle (5) son componentes propios, porque
   el theme no traia equivalente.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero del detalle.
   El title-bar del theme (shortcode.css:5576) trae una foto FIJA para todo el
   sitio (images/bg/titlebar-img.jpg) y 230px de alto. En el detalle el TPL le
   pasa la portada del proyecto por style="background-image", asi que aca solo
   hace falta:
     a) altura para que la foto se lea como hero y no como faja;
     b) el velo oscuro. El :before del theme existe y esta bien posicionado,
        pero solo tiene background-image:none!important y ningun color: sobre
        una foto clara, el titulo blanco desaparecia. Se le da color aca en
        lugar de tocar shortcode.css.
   El :before queda por debajo del contenido, que ya lleva z-index:1.
   -------------------------------------------------------------------------- */
.velvet-hero-proyecto,
.velvet-hero-proyecto .pbmit-title-bar-content {
    min-height: 420px;
}
.velvet-hero-proyecto:before {
    background-color: rgba(var(--pbmit-blackish-color-rgb), .55);
}
@media (max-width: 767px) {
    .velvet-hero-proyecto,
    .velvet-hero-proyecto .pbmit-title-bar-content {
        min-height: 320px;
    }
}

/* --------------------------------------------------------------------------
   2. Badge de estado.
   Unica pieza sin equivalente en el template: Xinterio no tiene un componente
   de estado. Se resuelve con las variables del theme, sin colores nuevos:
     Finalizado   -> blackish, cerrado, sin llamar la atencion
     En ejecucion -> dorado global, que es el color de enfasis del sitio
   El estado queda codificado en el color ademas del texto, asi que la grilla
   se lee de un vistazo sin tener que leer cada badge.
   En la card va dentro de .pbmit-featured-wrapper, que ya es position:relative
   y recorta con el mismo border-radius que la foto.
   -------------------------------------------------------------------------- */
.velvet-badge-estado {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 100px;
    font-size: 13px;
    line-height: 18px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--pbmit-white-color);
    background-color: var(--pbmit-blackish-color);
}
.velvet-badge-en-ejecucion {
    background-color: var(--pbmit-global-color);
}
.pbmit-featured-wrapper .velvet-badge-estado {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1;
}
/* En el hero acompaña al titulo, centrado como el resto del title-bar. */
.velvet-hero-proyecto .velvet-badge-estado {
    margin-top: 18px;
}

/* --------------------------------------------------------------------------
   3. Banda de datos (ihbox-style-14) en columnas.
   shortcode.css:1046 le da padding:40px 90px porque en el template este bloque
   ocupa el ancho completo. En una grilla de cuatro columnas esos 180px de
   padding lateral parten "En ejecución" en tres renglones. Se reduce el padding
   y se centra el contenido (el theme lo deja en inline-block alineado a la
   izquierda, que en columnas iguales se ve desprolijo).
   El separador vertical entre datos es el borde que ya usa el theme.
   -------------------------------------------------------------------------- */
.velvet-ficha-datos .pbmit-ihbox-style-14 {
    padding: 30px 15px;
    text-align: center;
}
.velvet-ficha-datos [class*="col-"]:not(:last-child) .pbmit-ihbox-style-14 {
    border-right: 1px solid rgba(var(--pbmit-blackish-color-rgb), .1);
}
.velvet-ficha-datos .pbmit-ihbox-style-14 .pbmit-element-title {
    font-size: 30px;
    line-height: 36px;
}
/* Dos por fila hasta 1200px: ahi el borde del segundo de cada fila sobra, y el
   de la primera fila tiene que pasar a ser una linea horizontal. */
@media (max-width: 1199px) {
    .velvet-ficha-datos [class*="col-"]:nth-child(2n) .pbmit-ihbox-style-14 {
        border-right: none;
    }
    .velvet-ficha-datos [class*="col-"]:nth-child(-n+2) .pbmit-ihbox-style-14 {
        border-bottom: 1px solid rgba(var(--pbmit-blackish-color-rgb), .1);
    }
}
@media (max-width: 575px) {
    .velvet-ficha-datos .pbmit-ihbox-style-14 {
        padding: 22px 10px;
    }
    .velvet-ficha-datos .pbmit-ihbox-style-14 .pbmit-element-title {
        font-size: 24px;
        line-height: 30px;
    }
}

/* ==========================================================================
   4. TARJETA DE PROYECTO (velvet-pcard)
   Componente propio, no de Xinterio. El del theme (portfolio-style-2) tiene el
   nombre y el tipo en un panel que arranca en opacity:0 y solo aparece con
   :hover (shortcode.css:6081-6099): en un telefono no hay hover, asi que la
   grilla quedaba en ocho fotos mudas y no habia forma de saber que proyecto era
   cada una sin entrar a ciegas.
   Aca la informacion esta SIEMPRE visible y el hover solo agrega enfasis (zoom
   de la foto y sombra); no aparece ni desaparece nada.

   Paleta y tipografia: las variables del theme, sin un solo hexadecimal nuevo.
     acento  var(--pbmit-global-color)     dorado arena
     texto   var(--pbmit-blackish-color)   marron oscuro
     fondo   var(--pbmit-light-color)      hueso
     titulos Space Grotesk / cuerpo Roboto (las del theme)

   Se usa en el listado y en "Otros proyectos" del detalle.
   ========================================================================== */

/* La columna reproduce el espaciado que el theme le da a sus propias cards
   (style.css:2219), con algo mas de aire. Va en la columna y no como gap de
   bootstrap porque isotope posiciona los items en absolute y el margen negativo
   de .row g-* le descuadra el calculo de anchos. */
.velvet-pcard-col {
    padding-left: 18px;
    padding-right: 18px;
    margin-bottom: 42px;
}

.velvet-pcard {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--pbmit-white-color);
    border: 1px solid rgba(var(--pbmit-blackish-color-rgb), .09);
    border-radius: 24px;
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow .4s ease, transform .4s ease, border-color .4s ease;
}
.velvet-pcard:hover {
    transform: translateY(-6px);
    border-color: rgba(var(--pbmit-global-color-rgb), .45);
    box-shadow: 0 18px 40px rgba(var(--pbmit-blackish-color-rgb), .13);
}
/* Foco visible para teclado: la tarjeta es el enlace, asi que el foco tiene que
   verse sobre la tarjeta entera. */
.velvet-pcard:focus-visible {
    outline: 2px solid var(--pbmit-global-color);
    outline-offset: 3px;
}

/* --- Foto: relacion 4:3 pareja para toda la grilla ------------------------ */
.velvet-pcard-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--pbmit-light-color);
}
.velvet-pcard-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.1s cubic-bezier(.4, .01, .14, .99);
}
.velvet-pcard:hover .velvet-pcard-media img {
    transform: scale(1.06);
}
.velvet-pcard-media .velvet-badge-estado {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 1;
}

/* --- Bloque de informacion, sobre hueso ----------------------------------- */
.velvet-pcard-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 26px 26px 24px;
    background-color: var(--pbmit-light-color);
}
.velvet-pcard-tipo {
    font-family: var(--pbmit-heading-typography-font-family);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--pbmit-global-color);
    margin-bottom: 10px;
}
.velvet-pcard-titulo {
    font-family: var(--pbmit-heading-typography-font-family);
    font-size: 23px;
    line-height: 30px;
    font-weight: 700;
    color: var(--pbmit-blackish-color);
    margin: 0 0 14px;
    text-wrap: balance;
    transition: color .3s ease;
}
.velvet-pcard:hover .velvet-pcard-titulo {
    color: var(--pbmit-global-color);
}

/* Datos tecnicos: ubicacion y superficie/año, cada uno con su icono. Son datos
   del proyecto, no adorno; por eso van en una lista. */
.velvet-pcard-meta {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 5px 20px;
}
.velvet-pcard-meta li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    line-height: 22px;
    color: var(--pbmit-blackish-color);
}
/* La ubicacion es la mas larga y se lleva su propio renglon; superficie y año,
   que son cortas, comparten el de abajo. */
.velvet-pcard-meta-full {
    flex: 0 0 100%;
}
.velvet-pcard-meta i {
    font-size: 14px;
    color: var(--pbmit-global-color);
}

.velvet-pcard-resumen {
    font-size: 15px;
    line-height: 24px;
    color: var(--pbmit-body-typography-color);
    margin: 0 0 22px;
    /* Exactamente dos renglones en toda la grilla. El clamp recorta los
       resumenes largos y el min-height reserva el alto de los cortos: sin el
       segundo, las tarjetas de una misma fila terminaban a distinta altura
       (isotope las posiciona en absolute, cada una con su alto natural). */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 48px;
}

/* --- "Ver proyecto" con la linea dorada ----------------------------------- */
/* margin-top:auto lo ancla abajo: con resumenes de distinto largo, el enlace
   queda a la misma altura en todas las tarjetas de la fila. */
.velvet-pcard-link {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 6px;
    font-family: var(--pbmit-heading-typography-font-family);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--pbmit-blackish-color);
    border-bottom: 2px solid var(--pbmit-global-color);
    transition: color .3s ease;
}
.velvet-pcard-link i {
    font-size: 13px;
    color: var(--pbmit-global-color);
    transition: transform .3s ease;
}
.velvet-pcard:hover .velvet-pcard-link {
    color: var(--pbmit-global-color);
}
.velvet-pcard:hover .velvet-pcard-link i {
    transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
    .velvet-pcard,
    .velvet-pcard-media img,
    .velvet-pcard-link i {
        transition: none;
    }
    .velvet-pcard:hover {
        transform: none;
    }
    .velvet-pcard:hover .velvet-pcard-media img {
        transform: none;
    }
}

@media (max-width: 767px) {
    .velvet-pcard-col {
        padding-left: 12px;
        padding-right: 12px;
        margin-bottom: 28px;
    }
    .velvet-pcard-body {
        padding: 22px 20px 20px;
    }
    .velvet-pcard-titulo {
        font-size: 21px;
        line-height: 28px;
    }
}

/* ==========================================================================
   5. DETALLE DE PROYECTO — bloques nuevos
   El detalle del theme (portfolio-single) es "texto + una foto y ya". Estos
   bloques le dan ritmo: secciones alternadas texto/imagen, alcance con iconos,
   comparador contenido, galeria en grilla y navegacion entre proyectos.

   Paleta y tipografia: las variables del theme, sin hexadecimales nuevos.
     acento  var(--pbmit-global-color)     dorado arena
     texto   var(--pbmit-blackish-color)   marron oscuro
     fondo   var(--pbmit-light-color)      hueso
     titulos Space Grotesk / cuerpo Roboto

   Los iconos (pbmit-xinterio-icon-*) son la fuente de interiorismo que ya trae
   el theme en flaticon.css: sillon, cama, taladro, ladrillo, almohadones.
   ========================================================================== */

/* --- Eyebrow y encabezados de seccion ------------------------------------ */
/* El eyebrow lleva una linea corta dorada adelante: ubica la seccion sin
   sumar un titulo mas, y es el mismo recurso en toda la pagina. */
.velvet-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--pbmit-heading-typography-font-family);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--pbmit-global-color);
    margin-bottom: 14px;
}
.velvet-eyebrow:before {
    content: "";
    width: 26px;
    height: 2px;
    background-color: var(--pbmit-global-color);
    flex: 0 0 26px;
}
.velvet-seccion-head {
    margin-bottom: 40px;
}
.velvet-seccion-titulo {
    font-family: var(--pbmit-heading-typography-font-family);
    font-size: 38px;
    line-height: 46px;
    font-weight: 700;
    color: var(--pbmit-blackish-color);
    margin: 0;
    text-wrap: balance;
}
.velvet-seccion-desc {
    font-size: 16px;
    line-height: 26px;
    color: var(--pbmit-body-typography-color);
    margin: 14px 0 0;
    max-width: 620px;
}
.velvet-seccion-head-centrada {
    text-align: center;
}
.velvet-seccion-head-centrada .velvet-eyebrow {
    justify-content: center;
}
.velvet-seccion-head-centrada .velvet-seccion-desc {
    margin-left: auto;
    margin-right: auto;
}

/* --- Secciones alternadas texto / imagen --------------------------------- */
/* Dos columnas parejas; la segunda seccion invierte el orden visual con
   direction, que solo afecta a los hijos directos de la grilla (el contenido
   de cada columna se restituye a ltr). Asi no hace falta duplicar el markup. */
.velvet-alt {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
.velvet-alt + .velvet-alt {
    margin-top: 90px;
}
.velvet-alt-invertida {
    direction: rtl;
}
.velvet-alt-invertida > * {
    direction: ltr;
}
.velvet-alt-media {
    border-radius: 24px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background-color: var(--pbmit-light-color);
}
.velvet-alt-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.velvet-alt-titulo {
    font-family: var(--pbmit-heading-typography-font-family);
    font-size: 30px;
    line-height: 40px;
    font-weight: 700;
    color: var(--pbmit-blackish-color);
    margin: 0 0 18px;
    text-wrap: balance;
}
.velvet-alt-texto p {
    font-size: 16px;
    line-height: 28px;
    margin: 0 0 16px;
}

/* Ficha compacta (ubicacion y servicios) dentro de la primera seccion: son los
   dos datos que no entran en la banda de arriba porque son textos largos. */
.velvet-ficha-inline {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    border-top: 1px solid rgba(var(--pbmit-blackish-color-rgb), .12);
}
.velvet-ficha-inline li {
    display: flex;
    gap: 18px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(var(--pbmit-blackish-color-rgb), .12);
}
.velvet-ficha-inline-label {
    flex: 0 0 96px;
    font-family: var(--pbmit-heading-typography-font-family);
    font-size: 12px;
    line-height: 24px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--pbmit-global-color);
}
.velvet-ficha-inline-valor {
    font-size: 15px;
    line-height: 24px;
    color: var(--pbmit-blackish-color);
}

/* --- Que incluyo el proyecto --------------------------------------------- */
/* auto-fit: la grilla se acomoda sola a la cantidad de items que tenga cada
   proyecto, sin media queries ni un numero de columnas fijo. */
.velvet-incluyo {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* 280px da cuatro columnas en escritorio. Con 210px entraban seis y la
       septima fila quedaba con un solo item colgado; con cuatro, siete items
       cierran 4+3 y las etiquetas largas ("Carpinteria a medida") entran en un
       renglon. */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
.velvet-incluyo-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 22px;
    background-color: var(--pbmit-white-color);
    border: 1px solid rgba(var(--pbmit-blackish-color-rgb), .08);
    border-radius: 18px;
    transition: border-color .3s ease, transform .3s ease;
}
.velvet-incluyo-item:hover {
    border-color: rgba(var(--pbmit-global-color-rgb), .5);
    transform: translateY(-3px);
}
.velvet-incluyo-icono {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(var(--pbmit-global-color-rgb), .12);
    color: var(--pbmit-global-color);
    font-size: 24px;
}
.velvet-incluyo-texto {
    font-family: var(--pbmit-heading-typography-font-family);
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
    color: var(--pbmit-blackish-color);
}

/* --- Mosaico de ambientes -------------------------------------------------- */
/* Las fotos locales que quedan despues de las secciones alternadas. La primera
   va a doble alto para que el bloque no sea otra grilla pareja: con tres fotos
   queda una grande a la izquierda y dos apiladas a la derecha, que es como se
   arma una vista de ambientes. Con mas fotos, siguen fluyendo en dos columnas.
   El comparador antes/despues se saco: el estudio no tiene pares de estas obras. */
.velvet-mosaico {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 230px;
    gap: 22px;
}
.velvet-mosaico-item {
    position: relative;
    display: block;
    border-radius: 20px;
    overflow: hidden;
    background-color: var(--pbmit-light-color);
}
.velvet-mosaico-item:first-child {
    grid-row: span 2;
}
.velvet-mosaico-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s cubic-bezier(.4, .01, .14, .99);
}
.velvet-mosaico-item:hover img {
    transform: scale(1.06);
}

/* --- Album del panel (API) ------------------------------------------------- */
.velvet-album {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
/* El cuadrado NO se pide con aspect-ratio: se reserva con padding-top al 100%
   del ancho, que anda en cualquier navegador con CSS.

   Con aspect-ratio, el <a> era un grid item cuya UNICA fuente de altura era esa
   propiedad, y su <img> pedia height:100% de un padre en auto: referencia
   circular. Donde aspect-ratio no existe (Safari/iOS 14 y anteriores, Chrome
   <88, Samsung Internet <15) la celda medida daba 170x0 y el album entero
   desaparecia — en desktop y en los moviles al dia se veia perfecto, de ahi el
   "en algunos celulares no se ve" a la misma resolucion.

   Este es el unico bloque del sitio que colapsaba: pcard-media, disc-media y
   alt-media degradan a la altura natural de la foto y se siguen viendo. */
.velvet-album-item {
    position: relative;
    display: block;
    padding-top: 100%;
    border-radius: 16px;
    overflow: hidden;
    background-color: var(--pbmit-light-color);
}
/* Las cuatro coordenadas en vez de inset, que recien esta en Safari 14.1: la
   idea de todo este bloque es justamente no dejar afuera a los moviles viejos. */
.velvet-album-item img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .9s cubic-bezier(.4, .01, .14, .99);
}
.velvet-album-item:hover img {
    transform: scale(1.07);
}

/* Toggle "ver todas" sin una linea de JS: un checkbox escondido y su label.
   Mientras no esta marcado, las fotos de la 13 en adelante no se muestran. */
.velvet-album-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.velvet-album-toggle:not(:checked) ~ .velvet-album .velvet-album-oculta {
    display: none;
}
.velvet-album-mas {
    text-align: center;
    margin-top: 34px;
}
.velvet-album-mas label {
    cursor: pointer;
    margin: 0;
}
.velvet-album-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 30px;
    border: 1px solid rgba(var(--pbmit-blackish-color-rgb), .25);
    border-radius: 100px;
    font-family: var(--pbmit-heading-typography-font-family);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--pbmit-blackish-color);
    transition: border-color .3s ease, color .3s ease, background-color .3s ease;
}
.velvet-album-btn:hover {
    border-color: var(--pbmit-global-color);
    background-color: var(--pbmit-global-color);
    color: var(--pbmit-white-color);
}
.velvet-album-btn i {
    font-size: 13px;
}
/* El boton dice una cosa u otra segun el estado del checkbox. */
.velvet-album-btn-ocultar { display: none; }
.velvet-album-toggle:checked ~ .velvet-album-mas .velvet-album-btn-ver { display: none; }
.velvet-album-toggle:checked ~ .velvet-album-mas .velvet-album-btn-ocultar { display: inline; }

/* Lupa compartida por el mosaico y el album. */
.velvet-zoom {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--pbmit-white-color);
    background-color: rgba(var(--pbmit-blackish-color-rgb), .35);
    opacity: 0;
    transition: opacity .35s ease;
}
.velvet-mosaico-item:hover .velvet-zoom,
.velvet-album-item:hover .velvet-zoom,
.velvet-mosaico-item:focus-visible .velvet-zoom,
.velvet-album-item:focus-visible .velvet-zoom {
    opacity: 1;
}
.velvet-mosaico-item:focus-visible,
.velvet-album-item:focus-visible {
    outline: 2px solid var(--pbmit-global-color);
    outline-offset: 3px;
}

/* --- Testimonio (condicional) -------------------------------------------- */
.velvet-testimonio {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}
.velvet-testimonio > i {
    font-size: 40px;
    color: var(--pbmit-global-color);
    display: block;
    margin-bottom: 20px;
}
.velvet-testimonio-texto {
    font-family: var(--pbmit-heading-typography-font-family);
    font-size: 24px;
    line-height: 38px;
    font-weight: 500;
    color: var(--pbmit-blackish-color);
    margin: 0 0 20px;
}
.velvet-testimonio-autor {
    font-family: var(--pbmit-heading-typography-font-family);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--pbmit-global-color);
}
.velvet-testimonio-autor span {
    display: block;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: var(--pbmit-body-typography-color);
}

/* --- CTA ------------------------------------------------------------------ */
/* Unico bloque oscuro de la pagina: despues de recorrer la obra es el momento
   de mayor enfasis, y corta la sucesion de blanco y hueso. */
.velvet-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 54px 60px;
    border-radius: 28px;
    background-color: var(--pbmit-blackish-color);
}
.velvet-cta-titulo {
    font-family: var(--pbmit-heading-typography-font-family);
    font-size: 34px;
    line-height: 42px;
    font-weight: 700;
    color: var(--pbmit-white-color);
    margin: 0 0 10px;
}
.velvet-cta-texto p {
    color: rgba(var(--pbmit-white-color-rgb), .75);
    margin: 0;
    font-size: 16px;
    line-height: 26px;
}
.velvet-cta .pbmit-btn {
    flex: 0 0 auto;
}

/* --- Navegacion anterior / siguiente -------------------------------------- */
.velvet-nav-proyectos {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-top: 60px;
    padding-top: 34px;
    border-top: 1px solid rgba(var(--pbmit-blackish-color-rgb), .12);
}
.velvet-nav-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-decoration: none;
    max-width: 46%;
}
/* Cuando falta uno de los dos, el que queda no se corre al centro. */
.velvet-nav-next {
    margin-left: auto;
    text-align: right;
    align-items: flex-end;
}
.velvet-nav-label {
    font-family: var(--pbmit-heading-typography-font-family);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--pbmit-global-color);
}
.velvet-nav-nombre {
    font-family: var(--pbmit-heading-typography-font-family);
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    color: var(--pbmit-blackish-color);
    transition: color .3s ease;
}
.velvet-nav-item:hover .velvet-nav-nombre {
    color: var(--pbmit-global-color);
}
.velvet-nav-item:focus-visible {
    outline: 2px solid var(--pbmit-global-color);
    outline-offset: 4px;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1199px) {
    .velvet-alt {
        gap: 40px;
    }
    .velvet-seccion-titulo {
        font-size: 32px;
        line-height: 40px;
    }
}
@media (max-width: 991px) {
    /* Una columna: la imagen va arriba en las dos secciones, tambien en la
       invertida (con una sola columna, invertir el orden no aporta nada y
       dejaria el texto colgado antes de su foto). */
    .velvet-alt,
    .velvet-alt-invertida {
        grid-template-columns: 1fr;
        gap: 28px;
        direction: ltr;
    }
    .velvet-alt + .velvet-alt {
        margin-top: 56px;
    }
    .velvet-cta {
        flex-direction: column;
        align-items: flex-start;
        padding: 40px 32px;
    }
    /* Este bloque va ANTES del de 767px: los dos matchean en un telefono y, con
       la misma especificidad, gana el ultimo que aparece en el archivo. Puesto
       al reves, las tres columnas de tablet pisaban las dos de movil. */
    .velvet-album {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 767px) {
    .velvet-seccion-titulo {
        font-size: 27px;
        line-height: 35px;
    }
    .velvet-seccion-head {
        margin-bottom: 28px;
    }
    .velvet-alt-titulo {
        font-size: 24px;
        line-height: 33px;
    }
    /* El mosaico pierde el doble alto y pasa a una columna: en 390px, dos
       columnas dejan las fotos demasiado chicas para ver un ambiente. */
    .velvet-mosaico {
        grid-template-columns: 1fr;
        grid-auto-rows: 230px;
        gap: 16px;
    }
    .velvet-mosaico-item:first-child {
        grid-row: span 1;
    }
    .velvet-album {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .velvet-incluyo {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .velvet-incluyo-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 18px 16px;
    }
    .velvet-incluyo-icono {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
        font-size: 20px;
    }
    .velvet-incluyo-texto {
        font-size: 14px;
        line-height: 20px;
    }
    .velvet-cta-titulo {
        font-size: 26px;
        line-height: 34px;
    }
    .velvet-nav-proyectos {
        flex-direction: column;
        gap: 22px;
    }
    .velvet-nav-item {
        max-width: 100%;
    }
    .velvet-nav-next {
        text-align: left;
        align-items: flex-start;
        margin-left: 0;
    }
    .velvet-ficha-inline li {
        flex-direction: column;
        gap: 2px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .velvet-mosaico-item img,
    .velvet-album-item img,
    .velvet-incluyo-item {
        transition: none;
    }
    .velvet-mosaico-item:hover img,
    .velvet-album-item:hover img,
    .velvet-incluyo-item:hover {
        transform: none;
    }
}

/* ==========================================================================
   6. SERVICIOS — tarjetas de disciplina
   La pagina tenia UNA sola imagen y las seis disciplinas como texto plano en
   columnas. Aca cada una pasa a tarjeta con foto de obra real.

   Las cinco primeras van numeradas porque son una secuencia de verdad —el
   orden en que avanza el proyecto, del concepto a la entrega—, no un adorno.
   Diseño Costo Cero no lleva numero: no es una etapa del trabajo sino una
   condicion comercial, y por eso ademas se distingue con el borde dorado y su
   propio enlace.

   Paleta y tipografia: las variables del theme, sin hexadecimales nuevos.
   ========================================================================== */
.velvet-disciplinas {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}
.velvet-disc {
    display: flex;
    flex-direction: column;
    background-color: var(--pbmit-white-color);
    border: 1px solid rgba(var(--pbmit-blackish-color-rgb), .09);
    border-radius: 22px;
    overflow: hidden;
    transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}
.velvet-disc:hover {
    transform: translateY(-5px);
    border-color: rgba(var(--pbmit-global-color-rgb), .45);
    box-shadow: 0 16px 36px rgba(var(--pbmit-blackish-color-rgb), .12);
}
.velvet-disc-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background-color: var(--pbmit-light-color);
}
.velvet-disc-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s cubic-bezier(.4, .01, .14, .99);
}
.velvet-disc:hover .velvet-disc-media img {
    transform: scale(1.06);
}
/* El numero de etapa, sobre la foto. */
.velvet-disc-num {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--pbmit-global-color);
    color: var(--pbmit-white-color);
    font-family: var(--pbmit-heading-typography-font-family);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .5px;
}
.velvet-disc-body {
    flex: 1 1 auto;
    padding: 26px 26px 28px;
}
.velvet-disc-titulo {
    font-family: var(--pbmit-heading-typography-font-family);
    font-size: 22px;
    line-height: 30px;
    font-weight: 700;
    color: var(--pbmit-blackish-color);
    margin: 0 0 12px;
    text-wrap: balance;
}
.velvet-disc-body p {
    font-size: 15px;
    line-height: 25px;
    margin: 0;
}

/* Diseño Costo Cero: fuera de la secuencia, con su etiqueta y su enlace. */
.velvet-disc-destacada {
    border-color: rgba(var(--pbmit-global-color-rgb), .55);
}
.velvet-disc-tag {
    display: inline-block;
    margin-bottom: 10px;
    padding: 5px 14px;
    border-radius: 100px;
    background-color: rgba(var(--pbmit-global-color-rgb), .14);
    color: var(--pbmit-global-color);
    font-family: var(--pbmit-heading-typography-font-family);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}
.velvet-disc-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--pbmit-global-color);
    font-family: var(--pbmit-heading-typography-font-family);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--pbmit-blackish-color);
    transition: color .3s ease;
}
.velvet-disc-link i {
    font-size: 12px;
    color: var(--pbmit-global-color);
    transition: transform .3s ease;
}
.velvet-disc-link:hover {
    color: var(--pbmit-global-color);
}
.velvet-disc-link:hover i {
    transform: translateX(4px);
}

@media (max-width: 767px) {
    .velvet-disciplinas {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .velvet-disc-body {
        padding: 22px 20px 24px;
    }
    .velvet-disc-titulo {
        font-size: 20px;
        line-height: 28px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .velvet-disc,
    .velvet-disc-media img,
    .velvet-disc-link i {
        transition: none;
    }
    .velvet-disc:hover,
    .velvet-disc:hover .velvet-disc-media img {
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   Accesos flotantes de WhatsApp e Instagram (markup en widgets/footer.tpl).

   Van a la IZQUIERDA porque la derecha ya la ocupa el "volver arriba" del
   template (.pbmit-progress-wrap, base.css:746), que es fixed en right/bottom
   50px y 50x50. Se copian esas mismas medidas para que las dos esquinas
   inferiores se lean como un par y no como dos criterios distintos.

   Color: el dorado de la marca con el icono en blanco, y al hover el marron
   oscuro del footer. No se usan los colores propios de cada red (verde de
   WhatsApp, degrade de Instagram) para no meter dos paletas ajenas en un sitio
   que es todo dorado y marron.

   z-index 9999: uno menos que el del "volver arriba", que ya vive en 10000.
   -------------------------------------------------------------------------- */
.velvet-flotantes {
    position: fixed;
    left: 50px;
    bottom: 50px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.velvet-flotante {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--pbmit-global-color);
    color: var(--pbmit-white-color);
    font-size: 22px;
    line-height: 1;
    box-shadow: 0 6px 18px rgba(64, 50, 38, .22);
    transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.velvet-flotante:hover,
.velvet-flotante:focus-visible {
    background-color: var(--pbmit-secondary-color);
    color: var(--pbmit-white-color);
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(64, 50, 38, .3);
}
.velvet-flotante:focus-visible {
    outline: 2px solid var(--pbmit-white-color);
    outline-offset: 2px;
}
/* El glifo de WhatsApp de fontawesome pisa un poco alto dentro del circulo. */
.velvet-flotante-whatsapp i {
    font-size: 24px;
}

/* En pantallas chicas se achican y se arriman al borde: a 50px del margen
   taparian contenido, y el "volver arriba" del template hace lo propio. */
@media (max-width: 767px) {
    .velvet-flotantes {
        left: 16px;
        bottom: 16px;
        gap: 10px;
    }
    .velvet-flotante {
        width: 44px;
        height: 44px;
        font-size: 19px;
    }
    .velvet-flotante-whatsapp i {
        font-size: 21px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .velvet-flotante {
        transition: none;
    }
    .velvet-flotante:hover,
    .velvet-flotante:focus-visible {
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   Contacto — aviso de por que no se envio la consulta.
   Lo asigna aviso() en contacto.php y lo muestra contacto.tpl arriba del
   formulario. Solo aparece en el camino de error: el exito redirige a /gracias.
   -------------------------------------------------------------------------- */
.velvet-form-aviso {
    margin-bottom: 24px;
    padding: 14px 18px;
    border-left: 3px solid var(--pbmit-global-color);
    background-color: rgba(var(--pbmit-global-color-rgb), .1);
    color: var(--pbmit-secondary-color);
    font-size: 15px;
    line-height: 22px;
}

/* --------------------------------------------------------------------------
   CTA de movil — "Diseño Costo Cero" en barra propia.

   El boton vivia dentro de .pbmit-header-content-wrapper con la clase d-xl-none
   del theme. Ahi, en 360px, arrancaba en x=158 (justo donde termina el logo) y
   llegaba a x=330, que es exactamente donde esta .navbar-toggler (absoluta,
   right:0, 40px de ancho): se pisaban. Y como el boton queda por encima en el
   orden de pintado, se comia el clic de la hamburguesa — elementFromPoint sobre
   el toggler devolvia el <a> del boton — y el menu movil del sitio no se podia
   abrir: tocarlo navegaba a /diseno-costo-cero.

   En una barra de ancho completo debajo del header no compite con nadie, el
   texto entra entero y la hamburguesa recupera su area de toque.
   -------------------------------------------------------------------------- */
.velvet-cta-movil {
    display: none;
    background-color: var(--pbmit-global-color);
}
.velvet-cta-movil a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 20px;
    color: var(--pbmit-white-color);
    font-family: var(--pbmit-heading-typography-font-family);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .8px;
    text-transform: uppercase;
    line-height: 20px;
    text-align: center;
}
.velvet-cta-movil a:hover,
.velvet-cta-movil a:focus {
    color: var(--pbmit-white-color);
    background-color: var(--pbmit-blackish-color);
}
.velvet-cta-movil i {
    font-size: 12px;
}

/* 1199px es el corte del theme: de ahi para abajo el menu colapsa en la
   hamburguesa y .pbmit-button-box-second se oculta (responsive.css:965-969),
   asi que la barra es el unico lugar donde queda el CTA.

   El margin-top reserva el alto del header, que es absolute (shortcode.css:4947)
   y no ocupa lugar en el flujo. Sin eso la barra se dibujaba encima del header;
   con eso queda justo debajo y empuja al slider y al title-bar de las internas,
   que antes le quedaban abajo y con el titulo tapado. 80px es el alto del header
   en este rango: .pbmit-main-header-area de header-style-5 en movil. */
@media (max-width: 1199px) {
    .velvet-cta-movil {
        display: block;
    }
    /* El padding va en el header y no como margin de la barra: un margin-top del
       primer hijo en flujo se colapsa hacia afuera y arrastraba al propio
       .site-header 80px para abajo, llevandose el header absoluto con el. */
    .site-header {
        padding-top: 80px;
    }
    /* El overlay no declara top, asi que un absolute cae en su posicion estatica
       —despues del padding— y bajaba 80px con el. Anclado arriba vuelve a su lugar
       y la barra le queda justo debajo. */
    .site-header .pbmit-header-overlay {
        top: 0;
    }
}
/* En pantallas muy angostas el texto se acorta antes que envolver en dos lineas. */
@media (max-width: 360px) {
    .velvet-cta-movil a {
        padding: 12px 14px;
        font-size: 13px;
        letter-spacing: .5px;
    }
}

/* --------------------------------------------------------------------------
   Fancybox — el lightbox de todo el sitio (reemplaza a magnific-popup, que
   scripts.js inicializaba de a UNA instancia por <a>, sin agrupar: por eso
   antes cada foto abria sola y no se podia deslizar).

   Marcado con data-fancybox en los .tpl, por grupo:
     proyecto    secciones alternadas + mosaico + album del panel, en ese orden
     equipo      las cuatro fotos del equipo (index y sobre-nosotros)
     nosotros    las dos fotos grandes de sobre-nosotros
     servicios   la foto de contenido + las seis disciplinas
     costo-cero  la foto de Diseño Costo Cero
     nota        portada de la nota + las imagenes de su cuerpo (por JS)

   Fuera, a proposito: el slider de la home y los heros de seccion (son
   background-image, no <img>), la firma y detalle-servicio (decorativos), el
   comparador Antes/Despues, las tarjetas que son enlaces a otra pagina y el
   carrusel de servicios de la home (Swiper con loop clona las slides: la
   galeria saldria con las fotos repetidas y el drag pelearia con el clic).

   Estas reglas son de layout, no de estilo: el <a> que envuelve a la imagen no
   tiene que cambiar como se veia el bloque.
   -------------------------------------------------------------------------- */
.velvet-alt-media > a,
.velvet-disc-media > a,
.pbmit-featured-wrapper > a[data-fancybox] {
    display: block;
    width: 100%;
    height: 100%;
}
.velvet-alt-media > a > img,
.velvet-disc-media > a > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* El cursor dice que la imagen se amplia. */
[data-fancybox] {
    cursor: zoom-in;
}
/* La flecha de navegacion del lightbox, en la paleta de Velvet. */
.fancybox-navigation .fancybox-button {
    background-color: rgba(var(--pbmit-blackish-color-rgb), .6);
}
.fancybox-navigation .fancybox-button:hover {
    background-color: var(--pbmit-global-color);
}
.fancybox-caption {
    font-family: var(--pbmit-body-typography-font-family);
}

/* ==========================================================================
   RESPONSIVE MOVIL — 360 a 767px

   El theme trae los paddings de escritorio y en varias secciones no los baja en
   movil: quedaban 200px arriba y abajo de una foto, 100px sobre el titulo de
   cada hero, 170px reservados para unas flechas que ni se muestran. Sumado da
   pantallas enteras de aire.

   No es UNA sola clase —son siete, cada una del theme— pero se corrigen todas
   desde este bloque, en un solo lugar y sin tocar los CSS del template.
   ========================================================================== */

/* --- 1. Interiorismo integral: la foto deja de recortarse -----------------
   .about-one-leftbox no tiene contenido propio en flujo: es un div con la foto
   de background-size:cover y el alto se lo daba padding:200px 0 (responsive.css
   2783). A 390px eso son 360 de ancho x 400 de alto, una caja MAS ALTA que la
   foto (700x566, relacion 1.237), asi que cover la ajustaba al alto y le cortaba
   los costados.

   El padding-bottom porcentual es relativo al ANCHO, asi que 80.86% (566/700)
   le da a la caja exactamente la relacion de la foto en cualquier pantalla:
   cover no tiene nada que recortar y la foto se ve entera. De paso el bloque
   pasa de 400 a ~267px de alto.

   Si algun dia se cambia images/index/1.jpg por una de otra relacion, hay que
   recalcular este porcentaje: alto / ancho * 100.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .about-one-leftbox {
        height: auto;
        padding: 0 0 80.86% 0;
        /* Los margenes laterales van a cero a proposito: un padding porcentual se
           mide contra el ancho del PADRE, no contra el propio, asi que con los
           15px de responsive.css:1895 la caja quedaba mas angosta que el
           porcentaje y la relacion salia 1.12 en vez de 1.237. Sin ellos coincide
           exacto, y el aire lateral ya lo pone el .container. */
        margin: 0 0 40px 0;
    }
}

/* --- 2. Paddings verticales de las secciones ------------------------------
   Los valores del theme son de escritorio y en movil quedan enormes. Se bajan
   todos aca; los CSS del template quedan intactos.

   Medido a 390px antes de tocar:
     .section-xl                  60 / 60
     .process-section-two         80 / 50   (Nuestro metodo — 3 paginas)
     .service-one                 90 / 50   (Alcance integral)
     .video-section-one           80 / 80
     .section-lgt                 60 / 100  (Diseño Costo Cero)
     .testimonial-one             60 / 0
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .section-xl,
    .site-content.section-xl {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .section-md,
    .site-content.service-details {
        padding-top: 34px;
        padding-bottom: 34px;
    }
    .section-lgt {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .process-section-two,
    .service-one,
    .pbmit-extend-animation.service-one {
        padding-top: 40px;
        padding-bottom: 34px;
    }
    .video-section-one {
        padding-top: 44px;
        padding-bottom: 44px;
    }
    .testimonial-one {
        padding-top: 40px;
    }
    .before-after-section-eight {
        padding-top: 34px;
        padding-bottom: 34px;
    }
    /* El carrusel de testimonios reserva 170px abajo para unas flechas que en
       movil el theme esconde: aire por nada. */
    .testimonial-one .swiper-slider {
        padding-bottom: 0;
    }
}

/* --- 3. La franja del CTA y el hero de cada pagina ------------------------
   La franja comia demasiado alto y el title-bar de las internas suma 100px de
   padding sobre el titulo, asi que el hero arrancaba muy abajo. Con las dos
   cosas mas ajustadas, el contenido de cada pagina empieza bastante mas arriba.
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
    .velvet-cta-movil a {
        padding: 9px 20px;
        font-size: 13px;
        letter-spacing: .6px;
    }
}

/* --- 4. Slider de la home en pantallas chicas -----------------------------
   El titulo entraba en cuatro renglones y, con el margen de 70px del contenido,
   la placa tapaba casi toda la foto. Tipografia mas chica, menos margen y
   botones mas bajos.
   -------------------------------------------------------------------------- */
@media (max-width: 575px) {
    .pbmit-slider-content {
        margin-top: 30px;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .pbmit-slider-five .pbmit-slider-content .pbmit-title,
    .pbmit-slider-content .pbmit-title {
        font-size: 20px;
        line-height: 27px;
        margin-bottom: 14px;
    }
    .pbmit-slider-content .pbmit-btn {
        padding-top: 7px;
        padding-bottom: 7px;
    }
    .pbmit-slider-content .pbmit-button-text {
        font-size: 12px;
    }
}

/* --- 5. Carrusel "Alcance integral": dots y flechas visibles --------------
   El markup ya pide dots y flechas (data-dots / data-arrows en index.tpl, que es
   el mecanismo del template). Falta el color: el theme deja los bullets del
   swiper generico casi transparentes, y esta seccion tiene fondo marron, asi que
   de los cinco se veia uno solo. La clase .velvet-carrusel-nav esta puesta en el
   .tpl para que esto no alcance a ningun otro carrusel del sitio.
   -------------------------------------------------------------------------- */
.velvet-carrusel-nav {
    /* Swiper reserva 170px abajo para la navegacion y con los dots pegados al
       carrusel ese hueco sobra; pero cero tampoco va: .swiper lleva
       overflow:hidden y el bullet activo, que escala a 1.25, sobresalia un pixel
       del contenedor y se veia cortado abajo. Diez alcanzan para el bullet
       escalado y siguen sin dejar aire de mas. */
    padding-bottom: 10px !important;
}
.velvet-carrusel-nav .swiper-pagination {
    position: static;
    margin-top: 14px;
    padding: 2px 0;
    line-height: 1;
}
.velvet-carrusel-nav .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    margin: 0 5px !important;
    background-color: rgba(255, 255, 255, .35);
    opacity: 1;
    transition: background-color .3s ease, transform .3s ease;
}
.velvet-carrusel-nav .swiper-pagination-bullet-active {
    background-color: var(--pbmit-global-color);
    transform: scale(1.25);
}


/* --------------------------------------------------------------------------
   Centrado vertical de las placas de texto sobre las fotos.

   Los dos casos —la placa del slider en la home y el title-bar de las internas—
   tienen la MISMA causa: un padding/margen puesto de un solo lado, que empuja el
   texto hacia abajo sin nada que lo compense arriba.

   1) Slider: .pbmit-slider-item ya es flex con align-items:center, o sea que el
      centrado estaba resuelto; pero responsive.css le pone
      .pbmit-slider-five .pbmit-slider-content{margin-top:70px} por debajo de
      991px y eso lo corria justo 70px. En escritorio el margen no existe y la
      placa esta perfectamente centrada, que es la prueba de que sobra.

   2) Heros internos: .pbmit-title-bar-content lleva padding-top y nada abajo,
      asi que el titulo y el breadcrumb quedaban 100px corridos en escritorio
      (venia asi del theme, no lo introdujo el ajuste de la franja) y 50px en
      movil. Con el padding repartido en partes iguales queda centrado y el alto
      del hero no cambia.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .pbmit-slider-five .pbmit-slider-content,
    .pbmit-slider-area .pbmit-slider-content {
        margin-top: 0;
    }
}

/* En escritorio el reparto NO es mitad y mitad: ahi el header es absolute y se
   monta sobre los primeros 80px del hero, asi que el centro de la caja no es el
   centro de lo que se VE. Repartido en partes iguales el titulo quedaba 15px por
   encima del borde del header —metido abajo suyo, pegado al corte—. Compensando
   la mitad del header (40px) el bloque queda centrado en el espacio visible y el
   hero conserva sus 230px de alto.

   Este reparto desparejo es tambien el motivo del padding-top:100 original del
   theme; lo que le faltaba era el padding de abajo para no pasarse de largo. */
.pbmit-title-bar-content {
    padding-top: 90px;
    padding-bottom: 10px;
}
@media (max-width: 1199px) {
    /* En movil si va mitad y mitad: la barra del CTA empuja al hero por debajo
       del header, que ahi no se superpone a nada. */
    .pbmit-title-bar-content {
        padding-top: 25px;
        padding-bottom: 25px;
    }
}

/* ==========================================================================
   PRELOADER

   Logo sobre el oscuro de la marca y, debajo, una linea que se dibuja del
   centro hacia afuera. La linea toma su forma de la del logotipo: dorada,
   finisima, difuminada en las puntas. Aca es simetrica —marcada en el centro,
   perdiendose hacia los dos lados— con un gradiente a transparente.

   REGLA DE ORO: no puede dejar la pantalla trabada. Por eso la salida esta en
   una animacion CSS con delay, no en el JS: aunque el JS no llegue a correr,
   falle o este bloqueado, a los 3s el preloader se va solo. El JS unicamente
   ADELANTA esa salida cuando la pagina termino antes, que es el caso normal.
   Los 3s del CSS quedan por encima del minimo de 1,5s del JS: si fueran menos,
   el CSS lo sacaria antes de que el contador llegara a 100.
   ========================================================================== */
.velvet-preloader {
    position: fixed;
    inset: 0;
    /* Por encima de todo lo demas: los botones flotantes ya usan 9999 y le
       ganaban por orden en el DOM, y base.css:756 llega a 10000. */
    z-index: 10050;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
    background-color: var(--pbmit-blackish-color);
    /* La red de seguridad: se va sola aunque el JS nunca corra. */
    animation: velvet-preloader-salida .55s ease 3s forwards;
}
/* Cuando el JS avisa que ya cargo, la salida se adelanta: la animacion se
   apaga y manda la transicion. El visibility con delay saca el overlay del
   flujo —y del orden de tabulacion— recien cuando termino de desvanecerse. */
.velvet-preloader.is-listo {
    animation: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .55s ease, visibility 0s linear .55s;
}
/* Navegacion interna dentro de la misma sesion: ni se muestra. */
.velvet-preloader.is-omitido {
    display: none;
}
@keyframes velvet-preloader-salida {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

.velvet-preloader-logo {
    width: 200px;
    max-width: 54vw;
    height: auto;
    display: block;
    opacity: 0;
    animation: velvet-preloader-logo .7s ease .1s forwards;
}
@keyframes velvet-preloader-logo {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* La linea. El gradiente le da el perfil del logotipo: nitida en el centro y
   deshaciendose hacia las puntas. Se dibuja con scaleX desde transform-origin
   center, o sea que crece hacia los dos lados a la vez. */
.velvet-preloader-linea {
    position: relative;
    width: 300px;
    max-width: 68vw;
    height: 1px;
    overflow: hidden;
    background-image: linear-gradient(90deg,
        rgba(var(--pbmit-global-color-rgb), 0) 0%,
        rgba(var(--pbmit-global-color-rgb), .55) 22%,
        var(--pbmit-global-color) 50%,
        rgba(var(--pbmit-global-color-rgb), .55) 78%,
        rgba(var(--pbmit-global-color-rgb), 0) 100%);
    transform: scaleX(0);
    transform-origin: center;
    animation: velvet-preloader-linea .9s cubic-bezier(.22, .61, .36, 1) .25s forwards;
}
@keyframes velvet-preloader-linea {
    to { transform: scaleX(1); }
}
/* Un brillo tenue que la recorre mientras se espera. Arranca despues de que la
   linea termino de dibujarse, para que se lean como un solo gesto y no como dos
   animaciones encimadas. */
.velvet-preloader-linea::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 38%;
    height: 100%;
    background-image: linear-gradient(90deg,
        rgba(var(--pbmit-white-color-rgb), 0),
        rgba(var(--pbmit-white-color-rgb), .7),
        rgba(var(--pbmit-white-color-rgb), 0));
    transform: translateX(-120%);
    animation: velvet-preloader-brillo 2.1s ease-in-out 1.1s infinite;
}
@keyframes velvet-preloader-brillo {
    to { transform: translateX(360%); }
}

@media (max-width: 575px) {
    .velvet-preloader {
        gap: 22px;
    }
    .velvet-preloader-logo {
        width: 156px;
    }
    .velvet-preloader-linea {
        width: 230px;
    }
}

/* Sin movimiento: la linea ya esta puesta y el brillo no corre. La salida
   automatica se mantiene —es la garantia de que la pantalla no queda trabada—
   pero sin recorrido, solo el desvanecido. */
@media (prefers-reduced-motion: reduce) {
    .velvet-preloader-logo {
        opacity: 1;
        animation: none;
    }
    .velvet-preloader-linea {
        transform: none;
        animation: none;
    }
    .velvet-preloader-linea::after {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Credito de autoria en el pie. Va en la misma linea que el copyright cuando
   entra y salta abajo cuando no, sin pelear con el menu del footer.
   -------------------------------------------------------------------------- */
.velvet-credito {
    display: inline-block;
    margin-left: 6px;
}
.velvet-credito a {
    color: var(--pbmit-global-color);
}
.velvet-credito a:hover,
.velvet-credito a:focus-visible {
    color: var(--pbmit-white-color);
    text-decoration: underline;
}
@media (max-width: 767px) {
    .velvet-credito {
        display: block;
        margin-left: 0;
        margin-top: 4px;
    }
}


/* El porcentaje, bajo la linea. Tabular para que los digitos no bailen de ancho
   al pasar de 9 a 10 o de 99 a 100: sin eso el numero tiembla mientras sube. */
.velvet-preloader-pct {
    font-family: var(--pbmit-heading-typography-font-family);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: rgba(var(--pbmit-global-color-rgb), .85);
    min-height: 12px;
    margin-top: -8px;
}
@media (max-width: 575px) {
    .velvet-preloader-pct {
        font-size: 11px;
    }
}