/* ========================================================================== Porairex ยท tokens de marca Dos capas: la paleta cruda (el color con su nombre) y los roles (fondo, texto, accion). Los componentes usan solo los roles, asi un cambio de marca se toca en un unico sitio. ========================================================================== */ :root { /* --- Paleta ---------------------------------------------------------- */ --prx-morado: #2a0a4a; --prx-morado-claro: #3d1269; --prx-morado-borde: #4a2570; --prx-naranja: #ff6a00; --prx-naranja-claro: #ff8329; --prx-verde: #25d366; --prx-verde-oscuro: #1fb757; --prx-verde-texto: #0a2e1f; --prx-blanco: #ffffff; --prx-lila: #f5f3f7; --prx-borde-lila: #e3deea; --prx-tinta: #2e2a38; --prx-tinta-suave: #5c5668; --prx-tinta-clara: #d9cfe6; /* --- Roles ----------------------------------------------------------- */ --prx-fondo: var(--prx-blanco); --prx-fondo-suave: var(--prx-lila); --prx-fondo-oscuro: var(--prx-morado); --prx-texto: var(--prx-tinta); --prx-texto-suave: var(--prx-tinta-suave); --prx-texto-oscuro: var(--prx-tinta-clara); /* sobre fondo morado */ --prx-titulo: var(--prx-morado); --prx-acento: var(--prx-naranja); --prx-accion: var(--prx-verde); --prx-accion-hover: var(--prx-verde-oscuro); --prx-accion-texto: var(--prx-verde-texto); --prx-borde: var(--prx-borde-lila); /* --- Tipografia ------------------------------------------------------ */ --prx-fuente-titulo: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif; --prx-fuente-texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; /* Escala fluida: crece con la pantalla sin saltos por dispositivo. */ --prx-t-hero: clamp(2rem, 1.2rem + 3.6vw, 3.5rem); --prx-t-h1: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem); --prx-t-h2: clamp(1.5rem, 1.15rem + 1.6vw, 2.125rem); --prx-t-h3: clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem); --prx-t-texto: 1rem; --prx-t-grande: 1.125rem; --prx-t-pequeno: 0.9375rem; --prx-interlineado-titulo: 1.15; --prx-interlineado-texto: 1.7; /* --- Espaciado (base 8) ---------------------------------------------- */ --prx-e1: 8px; --prx-e2: 16px; --prx-e3: 24px; --prx-e4: 32px; --prx-e5: 40px; --prx-e6: 48px; --prx-e8: 64px; --prx-e10: 80px; /* Se bajo de 104 a 84 px: entre dos secciones se suman dos veces, y 200 px de aire rompen la asociacion entre lo que se acaba de leer y lo que sigue. */ --prx-seccion: clamp(48px, 5.5vw, 84px); --prx-margen-lateral: 20px; /* --- Formas ----------------------------------------------------------- */ --prx-radio: 12px; --prx-radio-grande: 20px; --prx-radio-pastilla: 999px; --prx-sombra: 0 2px 10px rgba(42, 10, 74, 0.08); --prx-sombra-alta: 0 8px 28px rgba(42, 10, 74, 0.14); --prx-transicion: 0.18s ease; /* --- Motivo de marca ------------------------------------------------- La estela del avion del logo, dibujada en CSS: linea naranja discontinua que separa secciones y subraya titulos. */ --prx-estela: repeating-linear-gradient( 90deg, var(--prx-naranja) 0 12px, transparent 12px 20px ); /* --- Iconos ----------------------------------------------------------- Dibujados con mascara CSS: heredan el color del texto y no dependen de ninguna libreria de iconos. */ --prx-icono-whatsapp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2Zm0 18.13h-.01a8.23 8.23 0 0 1-4.19-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.2 8.2 0 0 1-1.26-4.36c0-4.54 3.7-8.24 8.25-8.24 2.2 0 4.27.86 5.83 2.42a8.19 8.19 0 0 1 2.41 5.83c0 4.54-3.7 8.21-8.24 8.21Zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.13-.16.24-.64.8-.79.97-.14.16-.29.18-.54.06-.25-.12-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.01-.38.11-.5.11-.11.25-.29.37-.43.13-.15.17-.25.25-.41.08-.17.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.41-.42-.56-.43h-.48c-.17 0-.43.06-.66.31-.23.25-.86.85-.86 2.06 0 1.22.89 2.39 1.01 2.56.12.16 1.75 2.67 4.23 3.74.59.26 1.05.41 1.41.52.59.19 1.13.16 1.56.1.48-.07 1.47-.6 1.68-1.18.21-.58.21-1.07.14-1.18-.06-.11-.22-.17-.47-.29Z'/%3E%3C/svg%3E"); /* --- Anchos ----------------------------------------------------------- */ --prx-ancho-contenido: 1200px; --prx-ancho-texto: 68ch; /* --- Iconos de la interfaz -------------------------------------------- De Phosphor, todos del mismo peso. Se pintan como mascara, asi que heredan el color del texto que tienen al lado: el mismo archivo sale morado en la portada, blanco en el pie y naranja al pasar el cursor. */ --prx-icono-envios-eeuu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='black' viewBox='0 0 256 256'%3E%3Cpath d='M208,40H48A16,16,0,0,0,32,56v56c0,52.72,25.52,84.67,46.93,102.19,23.06,18.86,46,25.26,47,25.53a8,8,0,0,0,4.2,0c1-.27,23.91-6.67,47-25.53C198.48,196.67,224,164.72,224,112V56A16,16,0,0,0,208,40Zm-34.32,69.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z'%3E%3C/path%3E%3C/svg%3E"); --prx-icono-carga-pesada: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='black' viewBox='0 0 256 256'%3E%3Cpath d='M240,184h-8V57.9l9.67-2.08a8,8,0,1,0-3.35-15.64l-224,48A8,8,0,0,0,16,104a8.16,8.16,0,0,0,1.69-.18L24,102.47V184H16a8,8,0,0,0,0,16H240a8,8,0,0,0,0-16Zm-56,0H72V168H184Zm0-32H72V136H184Z'%3E%3C/path%3E%3C/svg%3E"); --prx-icono-courier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='black' viewBox='0 0 256 256'%3E%3Cpath d='M223.68,66.15,135.68,18a15.88,15.88,0,0,0-15.36,0l-88,48.17a16,16,0,0,0-8.32,14v95.64a16,16,0,0,0,8.32,14l88,48.17a15.88,15.88,0,0,0,15.36,0l88-48.17a16,16,0,0,0,8.32-14V80.18A16,16,0,0,0,223.68,66.15ZM128,32l80.35,44L178.57,92.29l-80.35-44Zm0,88L47.65,76,81.56,57.43l80.35,44Zm88,55.85h0l-80,43.79V133.83l32-17.51V152a8,8,0,0,0,16,0V107.56l32-17.51v85.76Z'%3E%3C/path%3E%3C/svg%3E"); --prx-icono-equipaje: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='black' viewBox='0 0 256 256'%3E%3Cpath d='M192,48H168V24A24,24,0,0,0,144,0H112A24,24,0,0,0,88,24V48H64A16,16,0,0,0,48,64V208a16,16,0,0,0,16,16H80v16a8,8,0,0,0,16,0V224h64v16a8,8,0,0,0,16,0V224h16a16,16,0,0,0,16-16V64A16,16,0,0,0,192,48ZM96,192a8,8,0,0,1-16,0V80a8,8,0,0,1,16,0Zm40,0a8,8,0,0,1-16,0V80a8,8,0,0,1,16,0ZM152,48H104V24a8,8,0,0,1,8-8h32a8,8,0,0,1,8,8Zm24,144a8,8,0,0,1-16,0V80a8,8,0,0,1,16,0Z'%3E%3C/path%3E%3C/svg%3E"); --prx-icono-ecommerce: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='black' viewBox='0 0 256 256'%3E%3Cpath d='M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm-88,96A48.05,48.05,0,0,1,80,88a8,8,0,0,1,16,0,32,32,0,0,0,64,0,8,8,0,0,1,16,0A48.05,48.05,0,0,1,128,136Z'%3E%3C/path%3E%3C/svg%3E"); --prx-icono-asesoria: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='black' viewBox='0 0 256 256'%3E%3Cpath d='M232,96a16,16,0,0,0-16-16H184V48a16,16,0,0,0-16-16H40A16,16,0,0,0,24,48V176a8,8,0,0,0,13,6.22L72,154V184a16,16,0,0,0,16,16h93.59L219,230.22a8,8,0,0,0,5,1.78,8,8,0,0,0,8-8Zm-42.55,89.78a8,8,0,0,0-5-1.78H88V152h80a16,16,0,0,0,16-16V96h32V207.25Z'%3E%3C/path%3E%3C/svg%3E"); --prx-icono-correo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='black' viewBox='0 0 256 256'%3E%3Cpath d='M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48ZM98.71,128,40,181.81V74.19Zm11.84,10.85,12,11.05a8,8,0,0,0,10.82,0l12-11.05,58,53.15H52.57ZM157.29,128,216,74.18V181.82Z'%3E%3C/path%3E%3C/svg%3E"); --prx-icono-direccion: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='black' viewBox='0 0 256 256'%3E%3Cpath d='M128,16a88.1,88.1,0,0,0-88,88c0,75.3,80,132.17,83.41,134.55a8,8,0,0,0,9.18,0C136,236.17,216,179.3,216,104A88.1,88.1,0,0,0,128,16Zm0,56a32,32,0,1,1-32,32A32,32,0,0,1,128,72Z'%3E%3C/path%3E%3C/svg%3E"); --prx-icono-horario: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='black' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm56,112H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48a8,8,0,0,1,0,16Z'%3E%3C/path%3E%3C/svg%3E"); --prx-icono-instagram: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='black' viewBox='0 0 256 256'%3E%3Cpath d='M176,24H80A56.06,56.06,0,0,0,24,80v96a56.06,56.06,0,0,0,56,56h96a56.06,56.06,0,0,0,56-56V80A56.06,56.06,0,0,0,176,24ZM128,176a48,48,0,1,1,48-48A48.05,48.05,0,0,1,128,176Zm60-96a12,12,0,1,1,12-12A12,12,0,0,1,188,80Zm-28,48a32,32,0,1,1-32-32A32,32,0,0,1,160,128Z'%3E%3C/path%3E%3C/svg%3E"); --prx-icono-facebook: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='black' viewBox='0 0 256 256'%3E%3Cpath d='M232,128a104.16,104.16,0,0,1-91.55,103.26,4,4,0,0,1-4.45-4V152h24a8,8,0,0,0,8-8.53,8.17,8.17,0,0,0-8.25-7.47H136V112a16,16,0,0,1,16-16h16a8,8,0,0,0,8-8.53A8.17,8.17,0,0,0,167.73,80H152a32,32,0,0,0-32,32v24H96a8,8,0,0,0-8,8.53A8.17,8.17,0,0,0,96.27,152H120v75.28a4,4,0,0,1-4.44,4A104.15,104.15,0,0,1,24.07,124.09c2-54,45.74-97.9,99.78-100A104.12,104.12,0,0,1,232,128Z'%3E%3C/path%3E%3C/svg%3E"); /* --- Fotografias ------------------------------------------------------ Las que se colocan desde CSS, no desde un widget. La ruta es relativa a este archivo, asi que no lleva dominio y sobrevive a un cambio de dominio o a mover el sitio. Si cambias una foto en Medios, se cambia aqui y en ningun otro sitio. */ --prx-img-hero: url("../../../../uploads/2026/09/envios-aereos-internacionales-vista-desde-el-avion.webp"); --prx-img-personas: url("../../../../uploads/2026/09/paquete-personal-empacado-para-envio-internacional.webp"); --prx-img-empresas: url("../../../../uploads/2026/09/carga-paletizada-para-envios-internacionales-de-empresas.webp"); --prx-img-ecommerce: url("../../../../uploads/2026/09/paquetes-de-ecommerce-con-guia-listos-para-despacho.webp"); /* Velo morado: es lo que hace que fotos de origenes distintos parezcan de la misma marca, y lo que salva el contraste del texto blanco encima. */ --prx-velo-hero: linear-gradient( 100deg, rgba(42, 10, 74, 0.95) 0%, rgba(42, 10, 74, 0.88) 45%, rgba(42, 10, 74, 0.62) 100% ); --prx-velo-foto: linear-gradient( 180deg, rgba(42, 10, 74, 0.10), rgba(42, 10, 74, 0.38) ); } :root { /* Palomita para las listas de confianza y ventajas. */ --prx-icono-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M9.55 17.6 4 12.05l1.4-1.4 4.15 4.15L18.6 5.7 20 7.1z'/%3E%3C/svg%3E"); }