/*
Theme Name: Loraic Child
Theme URI: http://demo.bravisthemes.com/loraic
Author: Bravis-Themes
Author URI: https://bravisthemes.com/
Description: Loraic is a modern and carefully designed theme geared specifically towards all ,It will be suitable for any transport,logistics and movers management business. It will also be suitable for any kind of professional business template. It can be used for various business sites like ship based transport, air based transport etc. It is a complete designs with all minimum required contents for courier business.
Version: 1.0.3
License: ThemeForest
License URI: https://themeforest.net/licenses
Template: loraic
Text Domain: loraic-child
Tags: business, cargo, corporate, courier, frieght, logistics, movers, multipurpose business, shipment, transport, transportation.
*/
/* === FLAKO COLORES INICIO: generado desde loraic/assets/css/style.css. Borrar este bloque para volver a los colores del tema. === */
.error404 .pxl-error-inner .btn { color: #F3F6FB; }
.pxl-swiper-arrow:hover { box-shadow: 0px 10px 30px rgba(110, 168, 255, 0.14); }
h1, h2, h3, h4, h5, h6 { color: #0A1C3D; }
@keyframes pxl_loaderFlash { 0% { background-color: rgba(28, 79, 208, 0.28); box-shadow: 32px 0 rgba(28, 79, 208, 0.28), -32px 0 var(--primary-color); } 50% { background-color: var(--primary-color); box-shadow: 32px 0 rgba(28, 79, 208, 0.28), -32px 0 rgba(28, 79, 208, 0.28); } 100% { background-color: rgba(28, 79, 208, 0.28); box-shadow: 32px 0 var(--primary-color), -32px 0 rgba(28, 79, 208, 0.28); } }
.pxl-loader.style-insurance .pxl-loader-effect > div:before { background-color: rgba(28, 79, 208, 0.25); }
.pxl-loader.style-insurance .pxl-loader-effect .pxl-leaf-2:before { background-color: rgba(28, 79, 208, 0.5); }
.pxl-loader.style-insurance .pxl-loader-effect .pxl-leaf-3:before { background-color: #1C4FD0; }
.pxl-loader.style-insurance .pxl-loader-effect .pxl-leaf-4:before { background-color: rgba(28, 79, 208, 0.75); }
.pxl-link.style-box a { color: #0A1C3D; }
.pxl-text-effect1.pxl-image .pxl-item--image:before, .pxl-text-effect1.pxl-image .pxl-item--image-url:before { background-color: rgba(10, 28, 61, 0.74); }
.pxl-process1 .pxl-item--title { color: #0A1C3D; }
.pxl-image-single.style-divider .pxl-item--bg:before, .pxl-image-single.style-divider .pxl-item--image:before { background-color: rgba(10, 28, 61, 0.5); }
.pxl-showcase1 .pxl-item--readmore a { background-color: #1C4FD0; }
.pxl-countdown .countdown-period { color: #1C4FD0; }
@media (min-width: 767px) {
  .booked-calendar-shortcode-wrap .bc-head .bc-row.days .bc-col { background-color: #1C4FD0 !important; }
}
.pxl-history .pxl-history-1 .corner-box .wrap-content .box-1 { border-left: 6px solid #1C4FD0; }
@media (max-width: 991px) {
  .pxl-history .pxl-history-1 .corner-box .wrap-content .box-1 { border-right: 6px solid #1C4FD0; }
}
@media (min-width: 992px) {
  .pxl-history .pxl-history-1 .corner-box:nth-child(even) .box-1 { border-right: 6px solid #1C4FD0; }
}
.pxl-process-carousel1 .pxl-swiper-slide .pxl-item--inner .pxl-item-title { color: #0A1C3D; }
body div.booked-calendar-wrap div.booked-calendar .bc-body .bc-row.week .bc-col .date .number { color: #6EA8FF !important; }
@media (max-width: 767px) {
  .ct-cl-ft { background-color: #0A1C3D; }
}
.pxl-anchor-button.style-2 .pxl-icon-line { background-color: #14336B; }
.pxl---post .pxl-item--holder .pxl-item--meta .pxl-item--author .name a { color: #0A1C3D; }
.single-post .pxl-author--info .author-name a { color: #0A1C3D; }
.single-post .pxl-item-date { color: #1C4FD0; }
.widget_product_categories ul li a, .widget_categories ul li a, .widget_nav_menu ul li a, .widget_pages ul li a, .widget_archive ul li a, .widget_meta ul li a, .widget_recent_entries ul li a { color: #0A1C3D; }
.widget_tag_cloud a, .widget_product_tag_cloud a { border: 1px solid #6EA8FF; color: #6EA8FF; }
.widget_product_tag_cloud a { background-color: #E8EFFC; border-color: #E8EFFC; color: #0A1C3D; }
.widget_pxl_recent_posts .pxl-item--title a { color: #0A1C3D; }
.woocommerce .wg-product-inner .wg-product-image { border: 1.148px solid #E8EFFC; }
.wrap-home3 label { color: #0A1C3D; }
.wrap-ctf-home1 button { background-color: #0A1C3D; }
.woocommerce .widget_search .searchform-wrap input { border-color: #E8EFFC !important; }
.woocommerce .nice-select, .woocommerce-page .nice-select { border: 1px solid #E8EFFC !important; }
.widget_product_categories ul li a { color: #0A1C3D; }
.woocommerce-widget-layered-nav ul li a { color: #0A1C3D; }
.woocommerce .woocommerce-product-inner .woocommerce-product-header { border: 1px solid #E8EFFC; }
.single-product .woocommerce-social-share a { background-color: #E8EFFC; }
body.woocommerce-cart .cart-collaterals .cart_totals .wc-proceed-to-checkout .checkout-button { color: #0A1C3D; }
.woocommerce-checkout .woocommerce-form-coupon { background-color: #1C4FD0 !important; }
.pxl-shop-topbar-wrap .woocommerce-result-count { color: #0A1C3D; }
.wrap-nav-postcarousel .row .pxl-swiper-dots { color: #0A1C3D; }
.pxl-post-carousel1 .pxl-swiper-slide .pxl-item--inner .btn-readmore { color: #0A1C3D; }
.pxl-portfolio-carousel3 .pxl-carousel-inner .pxl-swiper-wrapper .pxl-swiper-slide { border-right: 1px solid rgba(10, 28, 61, 0.2); }
.pxl-portfolio-carousel3 .pxl-carousel-inner .pxl-swiper-wrapper .pxl-swiper-slide .wrap-inner .pxl-item--inner .pxl-item--featured .count { color: rgba(28, 79, 208, 0.30); }
@media (max-width: 1200px) {
  .pxl-portfolio-carousel3 .pxl-carousel-inner .pxl-swiper-wrapper .pxl-swiper-slide { border-top: 1px solid #0A1C3D; }
  .pxl-portfolio-carousel3 .pxl-carousel-inner .pxl-swiper-wrapper .pxl-swiper-slide:last-child { border-bottom: 1px solid #0A1C3D; }
}
.pxl-service-carousel2.style-3 .pxl-icon { border: 4px solid #1C4FD0; }
.pxl-service-carousel2.style-3 .pxl-back .pxl-icon { border: 4px solid rgba(28, 79, 208, 0.2); }
.pxl-grid-filter1 .filter-item { color: #0A1C3D; }
.pxl-blog-grid-layout1 .pxl-grid-item .pxl-item--inner .btn-readmore { color: #0A1C3D; }
.pxl-post-layout-carrer-1 .pxl-grid-item .pxl-item--holder .meta-content .pxl-item--title { color: #0A1C3D; }
.pxl-portfolio-style1 .pxl-grid-item .pxl-item--inner:hover, .pxl-portfolio-carousel2 .pxl-grid-item .pxl-item--inner:hover, .pxl-portfolio-style1 .pxl-swiper-slide .pxl-item--inner:hover, .pxl-portfolio-carousel2 .pxl-swiper-slide .pxl-item--inner:hover { box-shadow: 0px 30px 50px 0px rgba(20, 51, 107, 0.33); }
.pxl-service-grid-layout1 .pxl-grid-item .pxl-item--inner .wrap-inner .pxl-item--title, .pxl-service-carousel1 .pxl-grid-item .pxl-item--inner .wrap-inner .pxl-item--title, .pxl-service-grid-layout1 .pxl-swiper-slide .pxl-item--inner .wrap-inner .pxl-item--title, .pxl-service-carousel1 .pxl-swiper-slide .pxl-item--inner .wrap-inner .pxl-item--title { color: #0A1C3D; }
.pxl-service-grid-layout1 .pxl-grid-item .pxl-item--inner .wrap-inner .pxl-item--readmore a, .pxl-service-carousel1 .pxl-grid-item .pxl-item--inner .wrap-inner .pxl-item--readmore a, .pxl-service-grid-layout1 .pxl-swiper-slide .pxl-item--inner .wrap-inner .pxl-item--readmore a, .pxl-service-carousel1 .pxl-swiper-slide .pxl-item--inner .wrap-inner .pxl-item--readmore a { color: #1C4FD0; }
.pxl-service-grid-layout2 .pxl-grid-item .pxl-item--inner .wrap-inner .pxl-item--category a, .pxl-service-carousel2 .pxl-grid-item .pxl-item--inner .wrap-inner .pxl-item--category a, .pxl-service-grid-layout2 .pxl-swiper-slide .pxl-item--inner .wrap-inner .pxl-item--category a, .pxl-service-carousel2 .pxl-swiper-slide .pxl-item--inner .wrap-inner .pxl-item--category a { color: #1C4FD0; }
.pxl-service-grid-layout2 .pxl-grid-item .pxl-item--inner .wrap-inner .pxl-icon:before, .pxl-service-carousel2 .pxl-grid-item .pxl-item--inner .wrap-inner .pxl-icon:before, .pxl-service-grid-layout2 .pxl-swiper-slide .pxl-item--inner .wrap-inner .pxl-icon:before, .pxl-service-carousel2 .pxl-swiper-slide .pxl-item--inner .wrap-inner .pxl-icon:before { background-color: rgba(232, 239, 252, 0.6); }
.pxl-service-grid-layout2 .pxl-grid-item .pxl-item--inner .wrap-inner .pxl-item--title, .pxl-service-carousel2 .pxl-grid-item .pxl-item--inner .wrap-inner .pxl-item--title, .pxl-service-grid-layout2 .pxl-swiper-slide .pxl-item--inner .wrap-inner .pxl-item--title, .pxl-service-carousel2 .pxl-swiper-slide .pxl-item--inner .wrap-inner .pxl-item--title { color: #0A1C3D; }
.pxl-service-grid-layout2 .pxl-grid-item .pxl-item--inner .wrap-inner .pxl-item--readmore a, .pxl-service-carousel2 .pxl-grid-item .pxl-item--inner .wrap-inner .pxl-item--readmore a, .pxl-service-grid-layout2 .pxl-swiper-slide .pxl-item--inner .wrap-inner .pxl-item--readmore a, .pxl-service-carousel2 .pxl-swiper-slide .pxl-item--inner .wrap-inner .pxl-item--readmore a { color: #1C4FD0; }
.pxl-service-grid-layout3 .pxl-grid-item .pxl-item--inner .content .pxl-item--title { color: #0A1C3D; }
.pxl-service-grid-layout4 .pxl-grid-item .pxl-item--inner .pxl-item--featured:before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.0000001) 58.33%, rgba(20, 51, 107, 0.00) 58.34%, var(--primary-color) 100%); }
.pxl-service-grid-layout5 .pxl-grid-item .pxl-item--inner .pxl-item--featured:before, .pxl-service-carousel3 .pxl-grid-item .pxl-item--inner .pxl-item--featured:before, .pxl-service-grid-layout5 .pxl-swiper-slide .pxl-item--inner .pxl-item--featured:before, .pxl-service-carousel3 .pxl-swiper-slide .pxl-item--inner .pxl-item--featured:before { background: linear-gradient(0deg, #14336B 0%, rgba(0, 0, 0, 0.00) 79.95%), -3.96px 0px / 162.324% 100% no-repeat; }
.pxl-service-grid-layout5 .pxl-grid-item .pxl-item--inner .pxl-item--featured .pxl-icon, .pxl-service-carousel3 .pxl-grid-item .pxl-item--inner .pxl-item--featured .pxl-icon, .pxl-service-grid-layout5 .pxl-swiper-slide .pxl-item--inner .pxl-item--featured .pxl-icon, .pxl-service-carousel3 .pxl-swiper-slide .pxl-item--inner .pxl-item--featured .pxl-icon { background-color: rgba(232, 239, 252, 0.2); }
.btn-shape-primary .pxl-item--shape { background-color: #D2E1FF; }
.pxl-icon-box5 .pxl-item--inner .pxl-item-title { color: #0A1C3D; }
.pxl-icon-box6.style-1 .pxl-item--inner { border-bottom: 4px solid #D2E1FF; }
.pxl-icon-box6.style-1 .pxl-item--inner .pxl-item--icon { background-color: #E8EFFC; }
.pxl-icon-box6.style-1 .pxl-item--inner .pxl-item-title { color: #0A1C3D; }
.pxl-icon-box6.style-2 .pxl-item--inner { border-right: 5px solid #6EA8FF; }
.pxl-icon-box6.style-2 .pxl-item--inner .pxl-item-title { color: #0A1C3D; }
.pxl-icon-box7 .pxl-item--inner .pxl-item--icon i { color: #0A1C3D; }
.pxl-icon-box7 .pxl-item--inner .content-right .pxl-item-title a { color: #0A1C3D; }
.pxl-icon-box8 .pxl-item--inner .pxl-item--icon { background-color: rgba(28, 79, 208, 0.5); }
.pxl-icon-box9 .pxl-item--inner .pxl-item--icon { background-color: #E8EFFC; }
.pxl-icon-box9 .pxl-item--inner .pxl-item-title { color: #0A1C3D; }
.pxl-icon-box10 .pxl-item--inner .pxl-item-title a { color: #0A1C3D; }
.pxl-icon-box10 .pxl-item--inner:hover { background: #1C4FD0; box-shadow: 0px 20px 50px 0px #D2E1FF; }
.pxl-icon-box10.style-2 .pxl-item--inner .wrap-icon .pxl-item--icon { border: 1px solid #D2E1FF; background-color: #F3F6FB; }
.pxl-icon-box10.style-2 .pxl-item--inner:hover { box-shadow: 0px 20px 50px 0px #D6E3FA; }
.pxl-icon-box11 .pxl-item--inner { background-color: #F3F6FB; }
.pxl-image-box2 .pxl-item--inner .pxl-item--holder .holder-inner .pxl-item--sub-title { color: #1C4FD0; }
.pxl-image-box2 .pxl-item--inner .pxl-item--holder .holder-inner .pxl-item--link { color: #0A1C3D; }
.pxl-testimonial-carousel1 .pxl-item--inner .pxl-item--title { color: #0A1C3D; }
.pxl-testimonial-carousel1 .pxl-item--inner .pxl-item--position { color: #0A1C3D; }
.pxl-testimonial-carousel2 .pxl-swiper-slide .pxl-item--inner .pxl-item--title { color: #0A1C3D; }
.pxl-testimonial-carousel2 .pxl-swiper-slide .pxl-item--inner .pxl-item--position { color: #1C4FD0; }
.pxl-testimonial-carousel4 .pxl-swiper-slide .pxl-item--inner .pxl-item--star { border: 1px solid #F3F6FB; }
.pxl-testimonial-carousel4 .pxl-swiper-slide .pxl-item--inner .pxl-item--meta .content-right .pxl-item--title { color: #0A1C3D; }
.pxl-accordion1 .pxl-item--title { color: #0A1C3D; }
.pxl-tabs1 .pxl-tabs--title .pxl-item--title i { color: #0A1C3D; }
.pxl-tabs3 .pxl-tabs--inner .pxl-tabs--content:before { background-color: #163FA8; }
.pxl-team-carousel2 .pxl-swiper-slide .pxl-item--inner .pxl-item--holder .pxl-item--title, .pxl-team-carousel2 .pxl-swiper-slide .pxl-item--inner .pxl-item--holder .pxl-item--title a { color: #0A1C3D; }
.pxl-team-carousel2 .pxl-swiper-slide .pxl-item--inner .pxl-item--holder .pxl-item--position { color: #0A1C3D; }
.pxl-team-grid2 .pxl-grid-item .pxl-item--inner .pxl-item--holder .pxl-item--title, .pxl-team-grid2 .pxl-grid-item .pxl-item--inner .pxl-item--holder .pxl-item--title a { color: #0A1C3D; }
.pxl-team-grid2 .pxl-grid-item .pxl-item--inner .pxl-item--holder .pxl-item--position { color: #0A1C3D; }
.pxl-pricing1 .pxl-item--inner .pxl-item--title { color: #0A1C3D; }
.pxl-pricing1 .pxl-item--inner .pxl-item--price span:nth-child(1) { color: #0A1C3D; }
.pxl-pricing1 .pxl-item--inner .pxl-item--price span:nth-child(2) { color: #0A1C3D; }
.pxl-pricing1.is-popular .pxl-item--inner .content { border-bottom: 1px solid rgba(10, 28, 61, 0.4); }
/* SVG escritos en las plantillas PHP del tema (fill/stroke como atributo) */
[fill="#FF7D44" i] { fill: #1C4FD0; }
[stroke="#FF7D44" i] { stroke: #1C4FD0; }
[fill="#1C3F39" i] { fill: #0A1C3D; }
[fill="#07847F" i] { fill: #1C4FD0; }
[stroke="#07847F" i] { stroke: #1C4FD0; }
/* === FLAKO COLORES FIN === */

/* === FLAKO AJUSTES INICIO: retoques puntuales pedidos por el cliente. Borrar este bloque para deshacerlos. === */
/* Formulario del hero: tarjeta en azul marino y botón en azul para que contraste */
.wrap-ctf-home1.wrap-form { background-color: #0A1C3D; }
.wrap-ctf-home1 button { background-color: #1C4FD0; }
/* Seccion de consejos/blog retirada: se ocultan sus widgets pero se deja el
   espacio en blanco para que el bloque azul del footer siga solapandolo. */
.flako-oculto > .elementor-container,
.flako-oculto .elementor-widget-wrap > .elementor-element { display: none !important; }
.flako-oculto { min-height: 0; height: 120px; padding: 0 !important; background: #fff; }
/* === FLAKO AJUSTES FIN === */


/* FLAKO CALENDARIO FIX INICIO */
/* UACF7 genera `.uacf7-form-N .ui-state-default, .ui-widget-content .ui-state-default`:
   la segunda mitad NO está acotada al formulario y convierte los días del calendario en
   el thumb del slider (position:absolute, 24x24, top:-8px). Se deshace aquí. */
#ui-datepicker-div.flako-dp td a.ui-state-default,
#ui-datepicker-div.flako-dp td span.ui-state-default,
#ui-datepicker-div.flako-dp .ui-widget-content .ui-state-default {
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  height: 34px !important;
  line-height: 34px !important;
  border-radius: 8px !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  display: block !important;
  text-align: center !important;
  font-weight: 500 !important;
  color: #0a1c3d !important;
  cursor: pointer;
}
#ui-datepicker-div.flako-dp td a.ui-state-default:hover {
  background-color: #e8effc !important;
  color: #1c4fd0 !important;
}
#ui-datepicker-div.flako-dp td a.ui-state-active,
#ui-datepicker-div.flako-dp td .ui-state-active {
  background-color: #1c4fd0 !important;
  color: #fff !important;
  font-weight: 700 !important;
}
#ui-datepicker-div.flako-dp td .ui-state-highlight:not(.ui-state-active) {
  background-color: #f2f6ff !important;
  color: #1c4fd0 !important;
  font-weight: 700 !important;
}
#ui-datepicker-div.flako-dp td.ui-state-disabled span,
#ui-datepicker-div.flako-dp td.ui-datepicker-unselectable span {
  color: #b9c4d6 !important;
  cursor: default;
}
#ui-datepicker-div.flako-dp td {
  height: auto !important;
}
/* FLAKO CALENDARIO FIX FIN */

/* FLAKO CALENDARIO NAV INICIO */
/* El tema padre deja los botones de mes en display:inline y ocupan todo el ancho. */
#ui-datepicker-div.flako-dp .ui-datepicker-header {
  position: relative !important;
  height: 38px;
}
#ui-datepicker-div.flako-dp .ui-datepicker-prev,
#ui-datepicker-div.flako-dp .ui-datepicker-next {
  display: block !important;
  position: absolute !important;
  width: 30px !important;
  height: 30px !important;
  top: 3px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: #f2f6ff !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden;
  cursor: pointer;
}
#ui-datepicker-div.flako-dp .ui-datepicker-prev { left: 4px !important; right: auto !important; }
#ui-datepicker-div.flako-dp .ui-datepicker-next { right: 4px !important; left: auto !important; }
#ui-datepicker-div.flako-dp .ui-datepicker-prev:hover,
#ui-datepicker-div.flako-dp .ui-datepicker-next:hover {
  background: #1c4fd0 !important;
}
/* Mes anterior a hoy: no hay nada que ver, se atenúa. */
#ui-datepicker-div.flako-dp .ui-datepicker-prev.ui-state-disabled {
  opacity: 0.35;
  cursor: default;
}
#ui-datepicker-div.flako-dp .ui-datepicker-prev.ui-state-disabled:hover {
  background: #f2f6ff !important;
}
/* La flecha se dibuja con dos bordes; el sprite del tema base no existe aquí. */
#ui-datepicker-div.flako-dp .ui-datepicker-prev span,
#ui-datepicker-div.flako-dp .ui-datepicker-next span {
  display: block !important;
  position: absolute !important;
  width: 7px !important;
  height: 7px !important;
  margin: 0 !important;
  padding: 0 !important;
  top: 50% !important;
  left: 50% !important;
  border: solid #1c4fd0 !important;
  border-width: 0 2px 2px 0 !important;
  border-radius: 0 !important;
  background: none !important;
  background-image: none !important;
  text-indent: -9999px;
  font-size: 0 !important;
  overflow: hidden;
}
#ui-datepicker-div.flako-dp .ui-datepicker-prev span {
  transform: translate(-25%, -50%) rotate(135deg) !important;
}
#ui-datepicker-div.flako-dp .ui-datepicker-next span {
  transform: translate(-75%, -50%) rotate(-45deg) !important;
}
#ui-datepicker-div.flako-dp .ui-datepicker-prev:hover span,
#ui-datepicker-div.flako-dp .ui-datepicker-next:hover span {
  border-color: #fff !important;
}
/* FLAKO CALENDARIO NAV FIN */






/* FLAKO FORMULARIO PRESUPUESTO INICIO */
/* Espaciado cómodo + campos que aparecen según se va llenando. */

.flako-quote {
  padding: 46px 48px 40px 48px;
}
@media (max-width: 575px) {
  .flako-quote {
    padding: 32px 24px 30px 24px;
  }
}

.flako-quote h2 {
  font-size: 34px;
  line-height: 40px;
  margin-bottom: 30px;
}

/* El aire va ARRIBA del label: así no se pega al campo anterior. */
.flako-quote h5 {
  font-size: 15px;
  line-height: 22px;
  margin-top: 4px;
  margin-bottom: 10px;
}

.flako-quote input,
.flako-quote select,
.flako-quote textarea {
  height: 52px;
  border-radius: 6px;
  margin-bottom: 20px;
}
.flako-quote input {
  padding-left: 20px;
  margin-bottom: 20px;
}
.flako-quote textarea {
  height: 74px;
  padding: 14px 20px;
  line-height: 22px;
  resize: none;
}

/* El botón es el único elemento sin label encima: necesita su propio aire.
   Sin z-index propio: si lo tiene, compite con la lista desplegada de un select. */
.flako-quote button {
  margin-top: 26px;
  height: 56px;
}

/* El tema reemplaza el <select> por .pxl-select + ul.pxl-select-options.
   El <select> real queda oculto y se lleva el margin-bottom, así que el envoltorio
   visible debe llevarlo o el campo siguiente se pega al desplegable.
   Además la lista se despliega sin z-index y queda por debajo del botón de enviar. */
.flako-quote .input-filled {
  position: relative;
}
.flako-quote .pxl-select {
  position: relative;
  margin-bottom: 20px;
  /* Sin z-index estando cerrado: un z-index aquí crea un contexto de apilamiento y
     encierra a la lista, que entonces nunca puede superar al botón de enviar. */
}
.flako-quote .pxl-select .pxl-select-hidden {
  margin-bottom: 0;
}
/* Cualquier .input-filled que contenga un select va SIEMPRE por encima de los que vienen
   después, sin depender de detectar el estado abierto (el tema no lo marca de ninguna forma).
   El z-index va en el .input-filled, hermano directo del botón: si se pone en .pxl-select
   se crea un contexto de apilamiento que encierra la lista y nunca puede superar al botón.
   Los valores decrecientes evitan que un select tape la lista del select anterior. */
/* Cada bloque con select por encima del siguiente; el botón se queda en auto y debajo.
   Sin :has() para no depender del soporte del navegador. */
.flako-quote .your-freighttype-wrap,
.flako-quote .input-filled.has-select {
  z-index: 40;
}
.flako-quote .flako-step[data-step="1"] { z-index: 39; }
.flako-quote .flako-step[data-step="4"] { z-index: 38; }

.flako-quote .contact {
  font-size: 21px;
  line-height: 26px;
  padding-top: 26px;
  padding-bottom: 14px;
}
.flako-quote .contact a {
  font-size: 23px;
  line-height: 26px;
}
.flako-quote .notice {
  font-size: 14px;
  line-height: 21px;
  padding-top: 10px;
}

/* --- Campos progresivos --- */
/* Ocultos por defecto; el JS agrega .is-open. Sin JS se ven todos (no se pierde nada).
   Se oculta con `display:none !important` y al abrirse se DEVUELVE el display original
   de la rejilla (las columnas col-* de Bootstrap necesitan su propio display, no block). */
.flako-quote .flako-step:not(.is-open) {
  display: none !important;
}
.flako-quote .flako-step.is-open {
  animation: flako-aparece 0.28s ease-out both;
}
/* Solo opacidad: un translate desplaza la caja y la monta sobre el campo vecino. */
@keyframes flako-aparece {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .flako-quote .flako-step.is-open {
    animation: none;
  }
}

.flako-quote .flako-datepicker {
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231C4FD0' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  padding-right: 46px;
}
/* FLAKO FORMULARIO PRESUPUESTO FIN */





/* FLAKO LAYOUT FIX INICIO */

/* 1. Imagen decorativa (ab7.webp) del bloque "Paso 2". Es un widget con
      .elementor-absolute: su caja mide el ancho completo (1920px) y arranca en x=1050,
      así que la foto de 1070px invade la columna de texto de la izquierda y el
      párrafo queda leyéndose por encima de la imagen.
      Se limita el ancho del widget al espacio que le queda a la derecha. */
@media (min-width: 992px) {
  .elementor-element-9367da2.elementor-absolute {
    width: 40% !important;
    max-width: 40% !important;
    left: auto !important;
    right: 0 !important;
  }
  .elementor-element-9367da2 img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
}

/* 2. Separador vertical del demo (Line.png, repeat-y al 50% del ancho).
      En escritorio divide dos columnas; en móvil hay una sola y la raya
      parte el texto por la mitad. */
@media (max-width: 991px) {
  #about.elementor-element-347f87b {
    background-image: none !important;
  }
}

/* 3. Iconos del footer desalineados. La causa no es la caja sino el contenedor:
      .elementor-widget-wrap tiene justify-content:center, así que centra cada widget
      según SU propio ancho (251 / 173 / 340 px) y cada icono arranca en otra x. */
@media (max-width: 991px) {
  .elementor-widget-wrap:has(.pxl-icon-box) {
    justify-content: flex-start !important;
    align-items: stretch !important;
  }
  .elementor-widget-wrap > .elementor-element:has(.pxl-icon-box) {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
    align-self: stretch !important;
  }
  .pxl-icon-box,
  .pxl-icon-box .pxl-item--inner {
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
  }
  .pxl-icon-box .pxl-item--icon {
    flex: 0 0 auto;
  }
}
/* FLAKO LAYOUT FIX FIN */


/* FLAKO PAGINAS LEGALES INICIO */
/* Privacidad y Términos comparten el footer de la portada, pero el bloque
   "Pide tu presupuesto sin costo" no pinta nada en una página legal. */
.page-id-10232 .elementor-element-710a092,
.page-id-10233 .elementor-element-710a092 {
  display: none !important;
}

/* El contenido queda pegado al header al no haber franja de título. */
.page-id-10232 .pxl-content-area,
.page-id-10233 .pxl-content-area,
.page-id-10232 .pxl-entry-content,
.page-id-10233 .pxl-entry-content {
  padding-top: 60px;
  padding-bottom: 70px;
}
/* Ancho de lectura cómodo: un texto legal a 1400px cansa la vista. */
.page-id-10232 .pxl-entry-content,
.page-id-10233 .pxl-entry-content {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
.page-id-10232 .pxl-entry-content h1,
.page-id-10233 .pxl-entry-content h1 {
  margin-bottom: 26px;
}
.page-id-10232 .pxl-entry-content h2,
.page-id-10233 .pxl-entry-content h2 {
  margin-top: 38px;
  margin-bottom: 14px;
  font-size: 26px;
  line-height: 32px;
}
.page-id-10232 .pxl-entry-content p,
.page-id-10233 .pxl-entry-content p,
.page-id-10232 .pxl-entry-content li,
.page-id-10233 .pxl-entry-content li {
  line-height: 28px;
}
.page-id-10232 .pxl-entry-content ul,
.page-id-10233 .pxl-entry-content ul {
  padding-left: 22px;
  margin-bottom: 18px;
}
.page-id-10232 .pxl-entry-content li,
.page-id-10233 .pxl-entry-content li {
  list-style: disc;
  margin-bottom: 7px;
}
/* FLAKO PAGINAS LEGALES FIN */


/* FLAKO CALENDARIO BASE INICIO */
/* El estilo del calendario colgaba de .flako-dp, que añade el JS en beforeShow.
   Si esa clase no llega, el panel se queda sin fondo y se ve el formulario detrás.
   Estas reglas van por #ui-datepicker-div, que jQuery UI siempre crea. */
#ui-datepicker-div.ui-datepicker {
  width: 292px !important;
  max-width: calc(100vw - 32px);
  padding: 10px !important;
  border: 1px solid #d2e1ff !important;
  border-radius: 12px !important;
  background-color: #ffffff !important;
  background-image: none !important;
  box-shadow: 0 16px 40px rgba(10, 28, 61, 0.22);
  font-family: inherit;
  z-index: 9999 !important;
}
#ui-datepicker-div .ui-datepicker-header,
#ui-datepicker-div table,
#ui-datepicker-div td,
#ui-datepicker-div th {
  background: transparent !important;
  border: 0 !important;
}
#ui-datepicker-div .ui-datepicker-title {
  color: #0a1c3d !important;
  font-size: 15px;
  font-weight: 700;
  line-height: 30px;
  text-align: center;
}
#ui-datepicker-div th {
  color: #5a6a85 !important;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 0 !important;
}
#ui-datepicker-div td {
  padding: 2px !important;
}

/* Los días: sin esto quedan aplastados (el panel mide 22px de alto).
   UACF7 los convierte en el thumb de su slider — ver el bloque CALENDARIO FIX. */
#ui-datepicker-div td a,
#ui-datepicker-div td span {
  display: block !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  height: 34px !important;
  line-height: 34px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  background-image: none !important;
  color: #0a1c3d !important;
  font-weight: 500 !important;
  text-align: center !important;
}
#ui-datepicker-div td a:hover {
  background-color: #e8effc !important;
  color: #1c4fd0 !important;
}
#ui-datepicker-div td a.ui-state-active,
#ui-datepicker-div td .ui-state-active {
  background-color: #1c4fd0 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}
#ui-datepicker-div td .ui-state-highlight:not(.ui-state-active) {
  background-color: #f2f6ff !important;
  color: #1c4fd0 !important;
  font-weight: 700 !important;
}
#ui-datepicker-div td.ui-state-disabled span,
#ui-datepicker-div td.ui-datepicker-unselectable span {
  color: #b9c4d6 !important;
  cursor: default;
}

/* Botones de mes: el tema los deja en display:inline ocupando todo el ancho. */
#ui-datepicker-div .ui-datepicker-header {
  position: relative !important;
  height: 38px;
  padding: 2px 0 8px 0 !important;
}
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next {
  display: block !important;
  position: absolute !important;
  width: 30px !important;
  height: 30px !important;
  top: 3px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: #f2f6ff !important;
  font-size: 0 !important;
  overflow: hidden;
  cursor: pointer;
}
#ui-datepicker-div .ui-datepicker-prev { left: 4px !important; right: auto !important; }
#ui-datepicker-div .ui-datepicker-next { right: 4px !important; left: auto !important; }
#ui-datepicker-div .ui-datepicker-prev.ui-state-disabled { opacity: 0.35; cursor: default; }
#ui-datepicker-div .ui-datepicker-prev span,
#ui-datepicker-div .ui-datepicker-next span {
  display: block !important;
  position: absolute !important;
  width: 7px !important;
  height: 7px !important;
  top: 50% !important;
  left: 50% !important;
  margin: 0 !important;
  border: solid #1c4fd0 !important;
  border-width: 0 2px 2px 0 !important;
  border-radius: 0 !important;
  background: none !important;
  text-indent: -9999px;
  font-size: 0 !important;
}
#ui-datepicker-div .ui-datepicker-prev span { transform: translate(-25%, -50%) rotate(135deg) !important; }
#ui-datepicker-div .ui-datepicker-next span { transform: translate(-75%, -50%) rotate(-45deg) !important; }
/* FLAKO CALENDARIO BASE FIN */


/* FLAKO GRACIAS INICIO */
/* El formulario se difumina y encima aparece el mensaje de agradecimiento. */
.flako-quote {
  position: relative;
}
.flako-quote .wpcf7-form > .containter,
.flako-quote > .containter {
  transition: filter 0.45s ease, opacity 0.45s ease;
}
.flako-quote.flako-enviado .containter {
  filter: blur(5px);
  opacity: 0.35;
  pointer-events: none;
  user-select: none;
}

.flako-gracias {
  position: absolute;
  inset: 0;
  /* La tarjeta es más alta que la ventana en móvil: el panel se fija al centro visible. */
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 28px;
  border-radius: 17px;
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}
.flako-quote.flako-enviado .flako-gracias {
  opacity: 1;
  visibility: visible;
}
.flako-gracias .flako-check {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #1c4fd0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  animation: flako-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.flako-gracias .flako-check svg {
  width: 34px;
  height: 34px;
}
@keyframes flako-pop {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.flako-gracias h3 {
  color: #ffffff;
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  margin: 0 0 12px 0;
}
.flako-gracias p {
  color: #d2e1ff;
  font-size: 17px;
  line-height: 26px;
  margin: 0 0 6px 0;
  max-width: 420px;
}
.flako-gracias .flako-tel {
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
  margin-top: 14px;
  display: inline-block;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  padding-bottom: 3px;
}
.flako-gracias .flako-tel:hover {
  color: #6ea8ff;
}
@media (max-width: 575px) {
  .flako-gracias h3 { font-size: 24px; line-height: 30px; }
  .flako-gracias p { font-size: 15px; line-height: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .flako-gracias, .flako-quote .containter, .flako-gracias .flako-check { transition: none; animation: none; }
}

/* CF7 imprime su aviso FUERA del cuadro (hermano del form), así que hay que
   ocultarlo con el selector a nivel del formulario, no anidado en .flako-quote. */
form.wpcf7-form .wpcf7-response-output,
.wpcf7 form.sent .wpcf7-response-output {
  display: none !important;
}

/* El campo de fecha nativo, a juego con el resto. */
.flako-quote input[type="date"].flako-date {
  height: 52px;
  border-radius: 6px;
  padding-left: 20px;
  padding-right: 14px;
  margin-bottom: 20px;
  color: #5a6a85;
  font-family: inherit;
  font-size: 16px;
}
.flako-quote input[type="date"].flako-date::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.8;
  filter: invert(24%) sepia(89%) saturate(2100%) hue-rotate(217deg) brightness(92%) contrast(95%);
}
/* FLAKO GRACIAS FIN */


/* FLAKO SMS CONSENT INICIO */
/* Casilla de consentimiento SMS exigida por el registro 10DLC (TCR). Es OPCIONAL
   y viene desmarcada: por eso vive fuera de los .flako-step del revelado
   progresivo, para que el aviso completo se lea sin rellenar nada.

   El tema dibuja su propio checkbox: esconde el <input> real (opacity:0) y pinta
   la caja con .wpcf7-list-item-label:before, los dos en position:absolute con
   top:50%. Con un aviso de varias líneas eso deja la casilla flotando a media
   altura, así que aquí se ancla arriba en lugar de rehacer el control.
   Los selectores llevan .wrap-form delante para ganar en especificidad a
   `.pxl-contact-form form .wpcf7-acceptance ...` (0,3,2) sin usar !important. */

.flako-sms-consent {
  margin-bottom: 18px;
}
.flako-sms-consent .wpcf7-form-control-wrap {
  display: block;
}
.wrap-form .flako-sms-consent .wpcf7-acceptance .wpcf7-list-item {
  display: block;
  margin: 0;
}

/* Aviso legible sobre el azul marino del formulario y sin el
   text-transform:capitalize del tema, que reescribía el texto legal. */
.wrap-form .flako-sms-consent .wpcf7-acceptance .wpcf7-list-item-label {
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  color: #E4EDFC;
  text-transform: none;
  cursor: pointer;
}
.wrap-form .flako-sms-consent .wpcf7-acceptance .wpcf7-list-item-label a {
  color: #FFFFFF;
  text-transform: none;
  text-decoration: underline;
  text-decoration-color: #FFFFFF;
}
.wrap-form .flako-sms-consent .wpcf7-acceptance .wpcf7-list-item-label a:hover {
  color: #FFFFFF;
  text-decoration: none;
}

/* Casilla arriba a la izquierda: (18px de interlineado - 14px de caja) / 2 = 2px. */
.wrap-form .flako-sms-consent .wpcf7-acceptance .wpcf7-list-item input,
.wrap-form .flako-sms-consent .wpcf7-acceptance .wpcf7-list-item .wpcf7-list-item-label:before {
  top: 2px;
  -webkit-transform: none;
  transform: none;
}
.wrap-form .flako-sms-consent .wpcf7-acceptance .wpcf7-list-item .wpcf7-list-item-label:after {
  top: 2px;
  line-height: 14px;
  -webkit-transform: none;
  transform: none;
}
/* Marcada: azul de la marca en vez del gris del demo. */
.wrap-form .flako-sms-consent .wpcf7-acceptance .wpcf7-list-item input:checked + .wpcf7-list-item-label:before {
  background-color: #1C4FD0;
  border-color: #1C4FD0;
}

/* Línea en español, alineada con el texto del aviso (padding-left:24px del item). */
.flako-sms-consent .flako-sms-es {
  margin: 6px 0 0 24px;
  font-size: 11px;
  line-height: 16px;
  color: #C9D8F2;
  text-transform: none;
}
/* FLAKO SMS CONSENT FIN */


/* FLAKO FOOTER LEGAL MOVIL INICIO */
/* El botón flotante .pxl-scroll-top (position:fixed, abajo a la derecha) tapaba
   el último enlace de la fila legal del footer en móvil. Se le da aire por
   debajo a esa fila para que los tres enlaces se lean enteros. */
@media (max-width: 767px) {
  .elementor-element-9db19e4 {
    padding-bottom: 46px;
  }
}
/* FLAKO FOOTER LEGAL MOVIL FIN */