.elementor-3135 .elementor-element.elementor-element-2cd1ebe{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:5em;--margin-bottom:0em;--margin-left:0em;--margin-right:0em;}.elementor-3135 .elementor-element.elementor-element-f9df547{--display:flex;--min-height:180px;--justify-content:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--border-radius:16px 16px 16px 16px;--padding-top:35px;--padding-bottom:35px;--padding-left:35px;--padding-right:35px;}.elementor-3135 .elementor-element.elementor-element-f9df547:not(.elementor-motion-effects-element-type-background), .elementor-3135 .elementor-element.elementor-element-f9df547 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://vectorslaser.com/wp-content/uploads/2026/02/bannerdrivegeneral.png");background-repeat:no-repeat;background-size:cover;}.elementor-3135 .elementor-element.elementor-element-1e7a498 .elementor-heading-title{font-family:"Roboto", Sans-serif;color:#FFFFFF;}.elementor-3135 .elementor-element.elementor-element-6020523{color:#FFFFFF;}.elementor-3135 .elementor-element.elementor-element-48d0ec77{--display:flex;}@media(min-width:768px){.elementor-3135 .elementor-element.elementor-element-2cd1ebe{--content-width:1340px;}.elementor-3135 .elementor-element.elementor-element-48d0ec77{--content-width:1340px;}}/* Start custom CSS for shortcode, class: .elementor-element-40e002d1 */<style> 
/*paypal img /*



/* Forzar color del botón de pedido (normal + deshabilitado) */
body.woocommerce-checkout .place-order .button.alt#place_order,
body.woocommerce-checkout .place-order .button.alt#place_order:disabled,
body.woocommerce-checkout .place-order .button.alt#place_order[disabled],
body.woocommerce-checkout .place-order .button.alt#place_order.disabled {
    background-color: var(--vc-primary) !important;
    color: #fff !important;
    border-radius: 12px !important;
    padding: 1.1rem !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    width: 100% !important;
    border: none !important;
    text-transform: none !important;
    letter-spacing: .3px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .18);
    opacity: 1 !important;              /* 👈 evita que se vea “apagado” */
    background-image: none !important;   /* por si el theme mete gradientes raros */
}



/* ====================================================== CHECKOUT VECTORES – ESTILO FIGMA CONSOLIDADO ====================================================== */ /* -------- Colores base -------- */ :root { --vc-primary: #233d91; --vc-primary-soft: #233d9115; --vc-border: #ced6f0; --vc-bg-soft: #f5f7fb; --vc-text: #2a2a2a; } /* Fondo general del checkout */ body.woocommerce-checkout #content, body.woocommerce-checkout .site-main { background: var(--vc-bg-soft); } /* Contenedor general centrado */ .woocommerce-checkout form.checkout { max-width: 100% !important; margin: 0 auto; padding: 0 10px 50px !important; } /* ========================================= LAYOUT 2 COLUMNAS (FORM + TU PEDIDO) ========================================= */ @media (min-width: 980px) { .woocommerce-checkout form.checkout { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 2rem !important; } .woocommerce-checkout .col2-set, .woocommerce-checkout #order_review { float: none !important; margin: 0 !important; } .woocommerce-checkout .col2-set { width: 64% !important; padding: 2.4rem 2.4rem !important; } .woocommerce-checkout #order_review { width: 36% !important; padding: 2rem 2.2rem !important; } } /* En móvil: columnas apiladas */ @media (max-width: 979px) { .woocommerce-checkout form.checkout { display: block !important; } .woocommerce-checkout .col2-set, .woocommerce-checkout #order_review { width: 100% !important; margin-bottom: 2rem; } } /* ========================================= TARJETAS: DETALLES + RESUMEN ========================================= */ /* Caja de “Detalles de facturación + Información adicional” */ .woocommerce-checkout .col2-set { background: #fff; border-radius: 16px; border: 1px solid #e3e8f7; } /* Títulos de sección */ .woocommerce-billing-fields > h3, .woocommerce-additional-fields > h3 { font-size: 24px !important; font-weight: 700 !important; color: var(--vc-text); margin-bottom: 1.5rem; } /* Asegurar texto alineado a la izquierda en Información adicional */ .woocommerce-additional-fields { text-align: left; } /* ========================================= CAMPOS ESTILO FIGMA ========================================= */ /* Labels */ .woocommerce-checkout form .form-row label { font-size: 15px !important; font-weight: 600 !important; color: #183f7d; margin-bottom: 4px; text-transform: none !important; } /* Inputs / selects / textareas principales */ .woocommerce-checkout form.checkout .form-row input.input-text, .woocommerce-checkout form.checkout .form-row select, .woocommerce-checkout form.checkout .form-row textarea { background: #f9fbff !important; border: 2px solid var(--vc-border) !important; border-radius: 14px !important; min-height: 56px !important; height: 56px !important; padding: 0 1.4rem !important; font-size: 15px !important; line-height: 1.4 !important; box-shadow: none !important; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; } /* Textarea un poco más alto */ .woocommerce-checkout form.checkout .form-row textarea { min-height: 120px !important; padding-top: .8rem !important; } /* Placeholder estilo Figma */ .woocommerce-checkout ::placeholder { color: #9aa5c5 !important; opacity: 1; font-size: 14px; } /* Focus con glow suave */ .woocommerce-checkout form.checkout .form-row input.input-text:focus, .woocommerce-checkout form.checkout .form-row select:focus, .woocommerce-checkout form.checkout .form-row textarea:focus { background: #ffffff !important; border-color: #4a6fdc !important; box-shadow: 0 0 0 3px rgba(74, 111, 220, 0.18) !important; outline: 0 !important; } /* Select2 (País / Región) con misma altura y radio */ .woocommerce-checkout .select2-container--default .select2-selection--single { background-color: #f9fbff !important; border: 2px solid var(--vc-border) !important; border-radius: 14px !important; height: 56px !important; } .woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered { line-height: 56px !important; padding-left: 1.4rem !important; font-size: 15px !important; } .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 56px !important; } /* Filas en dos columnas (nombre / apellidos) */ .woocommerce-checkout .form-row-first, .woocommerce-checkout .form-row-last { width: 48% !important; float: left; } .woocommerce-checkout .form-row-first { margin-right: 4% !important; } /* ========================================= REORDENAR INFORMACIÓN ADICIONAL ========================================= */ .woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { width: 100% !important; float: none !important; } .woocommerce-checkout .col2-set .col-2 { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #edf0fb; } .woocommerce-additional-fields > h3 { font-size: 20px !important; font-weight: 600 !important; margin-bottom: 1rem; color: #1f2640; } /* ========================================= RESUMEN DERECHA: "TU PEDIDO" ========================================= */ /* Ocultamos título original */ .woocommerce-checkout h3#order_review_heading { display: none !important; } /* Card del resumen */ .woocommerce-checkout #order_review { background: #fff; border-radius: 16px; padding: 2rem 2.2rem !important; border: 1px solid #e3e8f7; overflow: hidden; /* para que nada se salga del borde redondeado */ } /* Nuevo título arriba */ .woocommerce-checkout #order_review::before { content: "Tu pedido"; display: block; font-size: 22px; font-weight: 700; color: #183f7d; margin-bottom: 1.2rem; } /* ========================================= TABLA DE PRODUCTOS – ESTILO MODERNO ========================================= */ /* Tabla general SIN borde exterior (lo tiene la card) */ body.woocommerce-checkout #order_review table.shop_table { width: 100%; border-collapse: separate !important; border-spacing: 0 !important; border: none !important; box-shadow: none !important; background: transparent; font-size: 14px; } /* Encabezados */ body.woocommerce-checkout #order_review table.shop_table thead th { background: #eef2ff !important; color: #233d91 !important; font-weight: 600 !important; font-size: 14px !important; padding: 12px 14px !important; border-bottom: 1px solid #e3e8f7 !important; } /* Filas cuerpo */ body.woocommerce-checkout #order_review table.shop_table tbody td { padding: 12px 14px !important; background: #fff !important; color: #1f2640 !important; font-size: 14px !important; border-bottom: 1px solid #e3e8f7 !important; } /* Última fila del cuerpo sin borde extra */ body.woocommerce-checkout #order_review table.shop_table tbody tr:last-child td { border-bottom: none !important; } /* Fondo blanco para todas las filas (por si el theme mete algo raro) */ body.woocommerce-checkout #order_review table.shop_table tbody tr, body.woocommerce-checkout #order_review table.shop_table tfoot tr { background-color: #ffffff !important; } /* Nombre de producto y enlaces */ body.woocommerce-checkout #order_review table.shop_table td.product-name, body.woocommerce-checkout #order_review table.shop_table td.product-name *, body.woocommerce-checkout #order_review table.shop_table td.product-name a, body.woocommerce-checkout #order_review table.shop_table td.product-name a:visited, body.woocommerce-checkout #order_review table.shop_table td.product-name a:hover { color: #1f2640 !important; font-size: 14px !important; line-height: 1.5; text-decoration: none !important; font-weight: 500 !important; } /* Hover fila producto */ body.woocommerce-checkout #order_review table.shop_table tbody tr:hover td { background: #f8faff !important; transition: 0.15s ease-in-out; } /* Fila Subtotal / Total */ body.woocommerce-checkout #order_review table.shop_table tfoot th, body.woocommerce-checkout #order_review table.shop_table tfoot td { padding: 12px 14px !important; font-size: 15px !important; border-top: 1px solid #e3e8f7 !important; color: #1f2640 !important; font-weight: 600 !important; } /* Total destacado */ body.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total td, body.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total th { background: #f4f7ff !important; font-weight: 700 !important; color: #000 !important; } /* ========================================= MÉTODOS DE PAGO + PAYPAL + BOTÓN ========================================= */ .woocommerce-checkout #payment { background: #f9fbff !important; border-radius: 16px; padding: 2rem 1.7rem 2.2rem !important; /* un poco más de aire */ border: 1px solid #e3e8f7 !important; margin-top: 1.7rem !important; } /* Lista métodos de pago */ .woocommerce-checkout #payment ul.payment_methods { border: none !important; padding: 0 !important; margin: 0 0 1rem !important; } /* Cada método en bloque para que el tooltip quede debajo */ .woocommerce-checkout #payment ul.payment_methods li { display: block !important; padding: .75rem 0; } /* Radio + label en línea, pero solo ellos */ .woocommerce-checkout #payment ul.payment_methods li input[type="radio"] { margin-right: .5rem; vertical-align: middle; } .woocommerce-checkout #payment ul.payment_methods li label { display: inline-flex !important; align-items: center; gap: .35rem; margin: 0; font-size: 15px; font-weight: 500; } /* Caja de mensaje del método activo (PayPal / transferencia) */ .woocommerce-checkout #payment .payment_box { background: #f1f4ff !important; color: #384169 !important; border-radius: 12px !important; border: none !important; padding: 1rem 1.2rem !important; box-shadow: inset 0 0 0 1px #dde3fb; margin: .9rem 0 1.1rem 1.9rem !important; /* aparece justo debajo del label */ max-width: calc(100% - 1.9rem) !important; } /* Flecha del bocadillo */ .woocommerce-checkout #payment .payment_box::before { border-bottom-color: #f1f4ff !important; left: 1.9rem !important; } /* Texto interno */ .woocommerce-checkout #payment .payment_box p { margin: 0; font-size: 14px; line-height: 1.5; } /* Mobile: centrar tooltip */ @media (max-width: 767px) { .woocommerce-checkout #payment .payment_box { margin-left: 0 !important; max-width: 100% !important; } .woocommerce-checkout #payment .payment_box::before { left: 1.5rem !important; } } /* Botón "Realizar el pedido" */ #place_order { background: var(--vc-primary) !important; color: #fff !important; border-radius: 12px !important; padding: 1.1rem !important; font-size: 16px !important; font-weight: 600 !important; width: 100% !important; border: none !important; text-transform: none !important; letter-spacing: .3px; box-shadow: 0 10px 20px rgba(0, 0, 0, .18); transition: 0.2s ease; } #place_order:hover { background: #1a2f74 !important; transform: translateY(-2px); } /* ========================================= ICONO DE PAYPAL TRANSPARENTE (forzar opacidad normal) ========================================= */ /* Para el icono del método PayPal en la lista */ .woocommerce-checkout #payment .payment_method_paypal img, .woocommerce-checkout #payment .wc_payment_method.payment_method_ppcp-gateway img { opacity: 1 !important; filter: none !important; } /* Por si algún span SVG o pseudo le mete transparencia */ .woocommerce-checkout #payment .payment_method_paypal svg, .woocommerce-checkout #payment .payment_method_paypal span { opacity: 1 !important; } /* ====================================================== FIXES EVA — TABLA + SELECT2 + ALINEACIÓN GLOBAL ====================================================== */ /* ====================================================== 🟦 1) BORDER-RADIUS REAL PARA LA TABLA ====================================================== */ body.woocommerce-checkout #order_review table.shop_table { width: 100%; background: #fff; border: 1px solid #e3e8f7 !important; border-radius: 14px !important; border-collapse: separate !important; /* CLAVE */ border-spacing: 0 !important; /* CLAVE */ overflow: hidden !important; /* CLAVE */ } /* Encabezado curvo */ body.woocommerce-checkout #order_review table.shop_table thead th:first-child { border-top-left-radius: 14px !important; } body.woocommerce-checkout #order_review table.shop_table thead th:last-child { border-top-right-radius: 14px !important; } /* Quitar doble borde */ body.woocommerce-checkout #order_review table.shop_table th, body.woocommerce-checkout #order_review table.shop_table td { border: none !important; border-bottom: 1px solid #e8ecf7 !important; } /* Última fila del footer sin borde extra */ body.woocommerce-checkout #order_review table.shop_table tfoot tr:last-child td { border-bottom: none !important; } /* ====================================================== 🟦 2) ARREGLAR SELECT2 (País / Región / Provincia) ====================================================== */ /* Ajustar contenedor visual */ .select2-container--default .select2-selection--single { height: 56px !important; background: #f9fbff !important; border: 2px solid #ced6f0 !important; border-radius: 14px !important; padding: 0 !important; } /* Centrar texto verticalmente */ .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 56px !important; padding-left: 1.4rem !important; color: #1f2640 !important; font-size: 15px !important; } /* Flecha centrada */ .select2-container--default .select2-selection--single .select2-selection__arrow { height: 56px !important; right: 12px !important; } /* Quitar borde azul de tema o hover feo */ .select2-container--default.select2-container--open .select2-selection--single { border-color: #4a6fdc !important; box-shadow: 0 0 0 3px rgba(74,111,220,0.18) !important; } /* ====================================================== 🟦 3) ALINEACIÓN GLOBAL DE CAMPOS (input + select2) ====================================================== */ .woocommerce-checkout .form-row input.input-text, .woocommerce-checkout .form-row textarea, .select2-container .select2-selection--single { vertical-align: middle !important; } /* ====================================================== 🟦 4) ESPACIO EXTRA PARA PAYPAL ====================================================== */ .woocommerce-checkout #payment ul.payment_methods { margin-bottom: 1.4rem !important; } .woocommerce-checkout #payment .payment_box { margin-top: .95rem !important; /* MÁS ESPACIO */ } /* ====================================================== FIX SELECT2 — ALINEAR PERÚ / LIMA + COLORES FIGMA ====================================================== */ /* Caja principal del select mejor alineada (País / Región / Provincia) */ .woocommerce-checkout .select2-container--default .select2-selection--single { display: flex !important; align-items: center !important; justify-content: space-between; height: 56px !important; background: #f9fbff !important; border: 2px solid var(--vc-border) !important; border-radius: 14px !important; padding: 0 1.4rem !important; box-shadow: none !important; } /* Texto centrado vertical y sin padding raro */ .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0 !important; margin: 0 !important; line-height: normal !important; color: #1f2640 !important; font-size: 15px !important; } /* Flecha del select, centrada */ .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 56px !important; top: 0 !important; right: 12px !important; } /* Hover / foco igual que los inputs */ .woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single { border-color: #4a6fdc !important; box-shadow: 0 0 0 3px rgba(74, 111, 220, 0.18) !important; } /* Por si algún select normal se desajusta (fallback sin Select2) */ .woocommerce-checkout form.checkout .form-row select { height: 56px !important; padding: 0 1.4rem !important; line-height: 56px !important; } /* ====================================================== DROPDOWN DE SELECT2 — COLORES Y BORDES BONITOS ====================================================== */ /* Contenedor del desplegable */ .woocommerce-checkout .select2-container--default .select2-dropdown { border: 2px solid var(--vc-border) !important; border-radius: 12px !important; overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,.08); } /* Buscador dentro del dropdown (la cajita de arriba) */ .woocommerce-checkout .select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid var(--vc-border) !important; border-radius: 10px !important; padding: 6px 10px !important; outline: none !important; font-size: 14px !important; } /* Lista de opciones */ .woocommerce-checkout .select2-container--default .select2-results > .select2-results__options { max-height: 220px; padding: 4px 0; } /* Cada opción */ .woocommerce-checkout .select2-container--default .select2-results__option { padding: 8px 12px !important; font-size: 14px !important; color: #1f2640 !important; } /* Opción que estás pasando con el mouse / teclas */ .woocommerce-checkout .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #233d91 !important; color: #ffffff !important; } /* Opción ya seleccionada */ .woocommerce-checkout .select2-container--default .select2-results__option[aria-selected="true"] { background-color: #eef2ff !important; color: #233d91 !important; } /* Scrollbar del dropdown un poco más sutil (navegadores que lo soporten) */ 

.woocommerce-checkout .select2-container--default .select2-results__options::-webkit-scrollbar { width: 6px; } .woocommerce-checkout .select2-container--default .select2-results__options::-webkit-scrollbar-track { background: #f2f4fb; } .woocommerce-checkout .select2-container--default .select2-results__options::-webkit-scrollbar-thumb { background: #c2c8e6; border-radius: 3px; } /* ====================================================== SELECT2 – QUITAR RESALTADO GRIS Y USAR AZUL DE MARCA ====================================================== */ /* Opción actualmente seleccionada en la lista (la barra gris) */ .woocommerce-checkout .select2-container--default .select2-results__option[aria-selected="true"], .woocommerce-checkout .select2-container--default .select2-results__option--selected { background-color: #eef2ff !important; /* azul muy suave */ color: #233d91 !important; /* azul de marca */ } /* Opción que estás recorriendo con el mouse/teclas */ .woocommerce-checkout .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #233d91 !important; /* azul fuerte */ color: #ffffff !important; } /* ====================================================== AJUSTES EXTRA PARA MOBILE (≤767px) ====================================================== */ @media (max-width: 767px) { /* Caja cerrada del select: un poco más compacta */ .woocommerce-checkout .select2-container--default .select2-selection--single { height: 52px !important; padding: 0 1.1rem !important; } .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { font-size: 14px !important; } /* Dropdown más cómodo en móviles */ .woocommerce-checkout .select2-container--default .select2-dropdown { border-radius: 10px !important; box-shadow: 0 10px 24px rgba(0,0,0,.12); } .woocommerce-checkout .select2-container--default .select2-results > .select2-results__options { max-height: 200px; } .woocommerce-checkout .select2-container--default .select2-results__option { padding: 8px 10px !important; font-size: 13px !important; } } /* ============================ SELECT2 – dropdown más bonito (País / Región en checkout) ============================ */ /* Caja desplegable */ .woocommerce-checkout .select2-container--default .select2-dropdown { border: 2px solid var(--vc-border); border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12); overflow: hidden; } /* Campo de búsqueda dentro del dropdown */ .woocommerce-checkout .select2-container--default .select2-search--dropdown .select2-search__field { padding: 8px 10px; border-radius: 8px; border: 1px solid #d5ddf5; outline: none !important; } /* Opción cuando pasas el mouse / seleccionas con teclado */ .woocommerce-checkout .select2-container--default .select2-results__option--highlighted { background-color: #e3e9ff !important; /* azul suave, no gris feo */ color: #1f2640 !important; } /* Opción ya seleccionada */ .woocommerce-checkout .select2-container--default .select2-results__option[aria-selected="true"] { background-color: #f4f6ff !important; color: #1f2640 !important; } /* Quitar ese gris de filas alternas */ .woocommerce-checkout .select2-container--default .select2-results__option { background-color: #ffffff !important; } 


</style>/* End custom CSS */