/* ===================================================================
nexel — ajustes propios sobre el template "Services"
===================================================================
El template trae su color de marca cableado en css/styles.css (258
apariciones del violeta original). Ese archivo se regenera desde
css/styles-purple.css, que es la copia intacta que vino en el theme:
sed 's/#8964f1/#1877f2/g' css/styles-purple.css > css/styles.css
O sea que el AZUL de nexel no se define acá: se define ahí. Acá sólo
va lo que el theme no contempla.
La paleta es la misma que el portal — ver el bloque `:root` de
www/assets/css/app.css, que es el punto único de verdad de la marca:
--primario #1877f2 azul chrome, links, títulos
--acento #f97316 naranja acción primaria (CTAs)
El theme no tiene un lugar para el naranja: su `secondary` es el gris
oscuro #232323. Por eso el acento entra acá, y sólo donde la marca lo
usa — botones de acción.
=================================================================== */
:root {
--nexel-azul: #1877f2;
--nexel-naranja: #f97316;
--nexel-naranja-h: #d86414; /* mismo hover que el portal: 88% + negro */
/* Lo que tarda el paneo del banner en móvil. Como el recorrido es corto
* (la franja del 25% al 75% de la foto, ver js/banner-pan.js), subir
* este número es lo que hace el movimiento más lento. El salto de slide
* cae cuando el paneo termina, así que también marca cuánto dura cada
* slide en el celular. */
--nexel-pan-duration: 12s;
}
/* --- Botón de acción -----------------------------------------------
* `.butn.accent` es el CTA de la marca. Hereda toda la mecánica de
* `.butn` del theme (tamaños, transición, el relleno que se desliza en
* hover) y sólo le cambia el color, así que sigue funcionando con los
* modificadores del theme (`medium`, `white`, etc.).
*
* El theme pinta el hover con un pseudo-elemento, no con background:
* por eso hay que tocar `:before` y no alcanza con `:hover`. */
.butn.accent {
background-color: var(--nexel-naranja);
border-color: var(--nexel-naranja); }
.butn.accent:before {
background-color: var(--nexel-naranja-h); }
.butn.accent:hover,
.butn.accent:focus {
border-color: var(--nexel-naranja-h);
color: #fff; }
/* --- Banner: fondo de base ------------------------------------------
* Los slides y las cabeceras de página llevan texto blanco arriba de la
* foto. Mientras la foto viaja — o si nunca llega — el elemento no
* tiene fondo propio y queda el blanco de la página: el título, el menú
* y el logo desaparecen sin dar ningún error, y la pantalla se ve
* vacía.
*
* Con un fondo oscuro de base eso no puede pasar. Es el mismo azul
* grisáceo que el theme usa para sus velos (`theme-overlay-blue-dark`),
* así que cuando la foto aparece no se nota el cambio: queda debajo.
*
* Es una red, no un reemplazo. Que la foto llegue lo aseguran el
* `style` en el propio slide, el `` del `` y
* los reintentos de js/banner-visible.js. */
.common-banner .item,
.slider-fade3 .item {
background-color: #182937; }
/* --- Cabecera de página: base negra ---------------------------------
* La cabecera de las páginas internas (`.page-title-section`) va sobre
* negro, no sobre el azul grisáceo del theme. Son dos capas y las dos
* tienen que ser negras, si no el azul vuelve por una de ellas:
*
* - el `background-color` del elemento, que es lo que se ve mientras
* la foto viaja o si nunca llega;
* - el velo de `theme-overlay-blue-dark`, el `:before` al 75% que el
* theme pinta de #182937 y es el que tiñe de azul la foto ya
* cargada — que es el azul que se ve en pantalla.
*
* Va con la clase de la cabecera adelante a propósito: `.page-title-
* section.theme-overlay-blue-dark` gana por especificidad sin `!important`
* y deja intactos los otros usos del velo (la sección de llamada a la
* acción del inicio). */
.page-title-section.bg-img {
background-color: #000; }
/* El velo no es parejo: arranca negro arriba y se va abriendo hacia
* abajo, para que la foto asome donde está el detalle (la ciudad, las
* luces) y el borde de la cabecera no corte en seco contra el blanco de
* la página.
*
* El `opacity: 0.75` del `[data-overlay-dark="75"]` sigue vivo y
* multiplica a todo el degradado: por eso el primer tramo va en #000
* opaco y no en 0.75 — así arriba queda exactamente igual que antes, y
* lo único que cambia es de ahí para abajo. Al pie el alfa efectivo
* termina en 0.75 × 0.35 ≈ 0.26.
*
* El negro pleno llega hasta el 40% y recién después afloja: el `h1` de
* la cabecera cae cerca del 60% de la altura y necesita velo abajo del
* texto para leerse en blanco sobre cualquier foto. */
.page-title-section.theme-overlay-blue-dark[data-overlay-dark]:before {
background: linear-gradient(to bottom, #000 0%, #000 40%, rgba(0, 0, 0, 0.35) 100%); }
/* --- Banner: paneo en móvil ----------------------------------------
* En el celular el banner es alto y angosto, así que `cover` recorta la
* foto y se ve apenas una franja del medio. Para que se vea entera, cada
* slide lleva una capa con la misma imagen a la altura del banner y su
* ancho natural (más ancha que la pantalla), que se desplaza de la
* izquierda a la derecha mientras el slide está a la vista.
*
* La capa la arma js/banner-pan.js, que además calcula el tramo a
* recorrer y lo deja en `--pan-from` y `--pan-to`. En desktop no existe:
* la foto entra entera y el fondo `cover` del theme alcanza.
*
* El gancho es `.nexel-pan` y no la clase del slider del theme. Hoy las
* tres páginas con banner corren el mismo carrusel (`.slider-fade3`),
* así que da igual; se deja la clase propia porque es lo que marca qué
* banners panean, y el theme trae otros sliders que no lo tienen que
* hacer. */
.nexel-pan .slide-pan {
display: none; }
@media (max-width: 767.98px) {
.nexel-pan .slide-pan {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
z-index: 0; }
.nexel-pan .slide-pan img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: auto;
max-width: none;
transform: translate3d(var(--pan-from, 0px), 0, 0);
will-change: transform; }
.nexel-pan .slide-pan img.panning {
animation: nexel-slide-pan var(--nexel-pan-duration, 9s) linear forwards; }
}
/* --- Banner: el filo claro del borde izquierdo ----------------------
* Los dos carruseles del sitio corren con `loop: true` e `items: 1`, así
* que owl clona los slides y mueve el `.owl-stage` con un `translate3d`
* que es múltiplo del ancho de un slide. Ese ancho tiene decimales
* —412.5px en un teléfono de 412— y el medio píxel que sobra deja asomar
* por la IZQUIERDA el borde derecho del slide vecino.
*
* Justo ahí el velo del theme es transparente: `left-overlay` es un
* degradado que va de negro a la izquierda a transparente a la derecha.
* Por eso lo que asoma es una columna CLARA, y por eso aparecía en todos
* los slides y en las tres páginas del banner.
*
* Estirar el velo de cada slide no alcanza —el píxel que se ve pertenece
* a OTRO slide—, así que la tapa va sobre el carrusel entero: una franja
* opaca contra su borde izquierdo, del mismo negro al 80% que el velo ya
* pinta a esa altura. Donde cae, el degradado está en negro pleno, así
* que es indistinguible de lo que debería verse.
*
* Dos píxeles y no uno: el sobrante depende del ancho de pantalla y hay
* medidas donde pasa de 1px. El `z-index` la pone sobre el stage (1) y
* sobre el contenido del slide (2); no llega a tapar texto, que arranca
* con el padding del contenedor. */
.nexel-pan {
position: relative; }
.nexel-pan:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 2px;
background: #000;
opacity: .8;
z-index: 3;
pointer-events: none; }
@keyframes nexel-slide-pan {
from { transform: translate3d(var(--pan-from, 0px), 0, 0); }
to { transform: translate3d(var(--pan-to, 0px), 0, 0); }
}
/* Quien pidió menos movimiento no ve el paneo: se queda con el recorte
* centrado de siempre. */
@media (prefers-reduced-motion: reduce) {
.nexel-pan .slide-pan {
display: none; }
}
/* --- Banner: paginación ---------------------------------------------
* El theme numera los slides con un contador CSS (`01 | 02 | 03`) sobre
* la foto. Acá van puntos, que dicen lo mismo sin tapar la imagen. */
.slider-fade3.owl-theme .owl-dots .owl-dot:before {
content: none; }
.slider-fade3.owl-theme .owl-dots .owl-dot span {
height: 20px;
width: 20px;
margin: 0 10px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.55); }
.slider-fade3.owl-theme .owl-dots .owl-dot span:before {
content: none; }
.slider-fade3.owl-theme .owl-dots .owl-dot.active span,
.slider-fade3.owl-theme .owl-dots .owl-dot:hover span {
background-color: var(--nexel-naranja); }
/* --- Cabecera de página: el rótulo de la ficha de una nota ----------
* En casi todas las páginas internas la franja de la cabecera dice el
* título de la página ("Contacto", "Precios"), y ahí el `
` es
* exactamente lo que corresponde.
*
* `blog-detail` es la excepción: su franja rotula la SECCIÓN y no la
* nota —a propósito, para que la altura de la franja no dependa del
* largo del título— así que el encabezado principal de esa página tiene
* que ser el título de la nota, que vive adentro del artículo. La franja
* pasa entonces a `
`: se ve igual y deja de competir.
*
* Mismos valores que styles.css:1538 y sus cuatro breakpoints. */
.page-title-section .h1 {
font-size: 44px;
font-weight: 700;
line-height: 1;
color: #ffffff;
margin-bottom: 0; }
@media screen and (max-width: 1199px) {
.page-title-section .h1 {
font-size: 40px; } }
@media screen and (max-width: 991px) {
.page-title-section .h1 {
font-size: 36px; } }
@media screen and (max-width: 767px) {
.page-title-section .h1 {
font-size: 34px; } }
@media screen and (max-width: 575px) {
.page-title-section .h1 {
font-size: 30px; } }
/* --- Banner: el título de los slides que no son el primero ----------
* Los banners son carruseles de dos o tres slides y cada uno traía su
* propio `
`, así que la home tenía dos y las páginas de rubro tres.
* Una página tiene UN encabezado principal: con tres, ninguno lo es, y
* un buscador no tiene con qué saber de qué se trata la página.
*
* Ahora el `
` queda sólo en el primer slide —el que además se ve al
* entrar— y los demás son `
`: el mismo texto, el mismo
* tamaño y la misma animación, sin pretender ser el título de la página.
*
* El patrón es el que el theme ya usa en `.banner3 .caption h1,
* .banner3 .caption .h1` (styles.css:1195): la clase `.h1` como
* equivalente visual del elemento. Para `.banner4` el theme sólo define
* el elemento, así que la clase se declara acá — con los MISMOS valores
* de styles.css:1289 y sus dos breakpoints, que es lo que hace que los
* slides se vean idénticos entre sí.
*
* Si alguna vez se regenera styles.css desde el .scss con otros valores
* para `.banner4 .caption h1`, hay que acompañarlos acá: el síntoma sería
* el primer slide con un tamaño de letra y los demás con otro. */
.banner4 .caption .h1 {
font-size: 60px;
font-weight: 400;
line-height: 65px;
color: #ffffff;
margin-bottom: 25px;
animation-delay: 0.8s; }
@media screen and (max-width: 1399px) {
.banner4 .caption .h1 {
font-size: 54px; } }
@media screen and (max-width: 991px) {
.banner4 .caption .h1 {
font-size: 45px; } }
/* --- Banner: título en móvil ----------------------------------------
* El theme baja el h1 del banner a 32px (≤767px) y a 23px (≤575px), que
* en el celular queda chico para lo primero que se lee de la página.
* Acá se agranda y de paso se cierra el interlineado: el theme deja 38px
* de línea para 23px de letra (1.65), que con un título más grande abre
* demasiado el bloque de dos renglones.
*
* Van los dos selectores —el elemento y la clase— porque el primer slide
* sigue siendo un `
` y los demás son `
`; si acá
* estuviera uno solo, en el celular los slides se verían de distinto
* tamaño.
*
* El orden importa: 767 antes que 575, igual que el theme, para que en
* pantallas chicas gane la segunda. */
@media screen and (max-width: 767px) {
.banner4 .caption h1,
.banner4 .caption .h1 {
font-size: 46px;
line-height: 54px; } }
@media screen and (max-width: 575px) {
.banner4 .caption h1,
.banner4 .caption .h1 {
font-size: 38px;
line-height: 46px; } }
/* --- Tarjetas de información: cuánto muerden el banner --------------
* `.info-style-01` es la fila de tres tarjetas blancas del inicio. El
* theme la sube 80px para que pise el banner, pero con el título del
* slide ya en su tamaño definitivo esa mordida tapaba el final de la
* foto y dejaba la composición apretada contra los botones.
*
* Con 20px siguen montadas sobre el banner —el efecto de solapado es
* del theme y se conserva— pero sin comerse el slide. También dejan
* libres los puntos de paginación, que caen al 8% del borde inferior.
*
* Va sólo de 992px para arriba porque abajo de ese ancho el theme ya
* las manda a `margin-top: 70px`, o sea debajo del banner y sin pisarlo:
* ahí no hay nada que corregir. */
@media screen and (min-width: 992px) {
.info-style-01 {
margin-top: -20px; } }
/* --- Clientes -------------------------------------------------------
* La grilla de clientes del theme (`.client-style-01`) espera el logo de
* cada empresa. Todavía no los tenemos, así que las celdas muestran el
* nombre tipografiado, con la misma caja y el mismo hover que tendrían
* con la imagen puesta. Cuando lleguen los logos esto se borra y vuelve
* el . */
.client-style-01 .client-name {
display: flex;
align-items: center;
justify-content: center;
min-height: 70px;
padding: 0 .5rem;
margin: 0;
font-size: 1.05rem;
line-height: 1.3;
font-weight: 600;
color: #232323;
text-align: center;
transition: color .3s ease; }
.client-style-01:hover .client-name {
color: var(--nexel-azul); }
/* --- Logo de la cabecera --------------------------------------------
* El theme dibuja el logo con `max-height: 43px` y nada de ancho (ver
* css/plugins/nav-menu.css). Mientras el no traía medidas eso
* alcanzaba: el ancho salía solo de la proporción del archivo.
*
* Al agregarle `width="555" height="145"` —para que el navegador reserve
* el lugar antes de bajar el PNG y la cabecera no pegue el salto— el
* alto quedó recortado a 43px por el `max-height`, pero el ancho siguió
* siendo los 555px del atributo. El logo se dibujaba a 555x43: estirado
* a lo ancho más del triple.
*
* Fijando el alto y soltando el ancho vuelve la proporción, y los
* atributos no sobran: de ellos saca el navegador la relación de aspecto
* con la que reserva el lugar antes de que el PNG llegue. */
.navbar-brand img#logo {
height: 43px;
width: auto; }
/* --- Logo del footer ------------------------------------------------
* El del footer no trae `width`/`height` ni regla en el theme: se
* dibuja al tamaño natural del archivo. El logo viejo medía 164x46, así
* que los 46px de alto eran el tamaño real del footer aunque nadie lo
* hubiera escrito en ningún lado.
*
* El archivo nuevo viene a 555x145 — el triple — porque a esa resolución
* el logo se ve nítido en las pantallas de densidad alta, donde un PNG
* de 164px de ancho se nota borroso. Acá se fija el alto de dibujado en
* los mismos 46px de siempre para que el footer no se mueva, y el ancho
* sale solo de la proporción.
*
* Va por `src` y no por una clase nueva a propósito: el footer es el
* mismo bloque repetido en las 93 páginas del template (ver index.php),
* así que agregar una clase obligaría a tocarlas todas. */
footer img[src*="footer-light-logo"] {
height: 46px;
width: auto; }
/* --- Tarjetas de servicios de vehiculos.php / inmuebles.php ----------
* `.card-style35` viene del theme pensada para UN caso: lista de ítems
* y, debajo, un botón de acción. Por eso su `ul` trae
* `border-bottom` + 30px de padding — es el separador entre la lista y
* el botón, no un adorno de la lista.
*
* Las dos páginas de rubro la usan ahora en dos formas que el theme no
* contempló, y cada una rompe ese supuesto de una manera distinta.
*
* `card-sin-cta`: las tres tarjetas de "Acompañamos a quien compra" no
* llevan botón —la acción de esa sección es leer, no clickear—, así que
* el separador quedaría como una raya al pie sin nada debajo.
*
* `lista-doble`: la tarjeta de marca lista ocho servicios en dos
* columnas, y cada `ul` se dibujaba su propio borde. Como las dos
* columnas no miden igual, quedaban dos rayas a distinta altura. El
* borde pasa a la fila, que sí es una sola. */
.card-style35.card-sin-cta .card-body ul,
.card-style35 .lista-doble ul {
border-bottom: 0;
padding-bottom: 0;
margin-bottom: 0; }
.card-style35 .lista-doble {
border-bottom: 1px solid #ededed;
padding-bottom: 30px;
margin-bottom: 30px; }
/* Apiladas en móvil las dos listas quedan pegadas: el último `li` de la
* primera tiene `margin-bottom: 0` por el theme. */
@media screen and (max-width: 767px) {
.card-style35 .lista-doble > div:not(:last-child) ul {
margin-bottom: 15px; } }
/* El tilde y el texto son dos cajas en línea, así que un ítem que entra en
* dos renglones arranca el segundo DEBAJO del tilde y la lista pierde el
* margen. Con el ancho de las tarjetas de planes de `precios.php` eso pasa
* ya en escritorio, y en cualquier tarjeta pasa al angostarse.
*
* `baseline` y no `flex-start`: alinea la primera línea del texto con el
* tilde, que es lo que hacía el `align-middle` del theme mientras el ítem
* era de un solo renglón. */
.card-style35 .card-body ul li {
display: flex;
align-items: baseline; }
.card-style35 .card-body ul li > i {
flex: none; }
/* --- Las dos tarjetas del selector de precios (precios.php) -----------
* La tarjeta entera es un ``, así que necesita decir que se puede
* clickear: el theme sólo trae el realce en los botones, y una `card-style35`
* quieta se lee como un recuadro informativo más.
*
* El color del texto va forzado porque un `` hereda el azul del link en
* todo lo que tiene adentro, incluidos el `