:root { --ora: 1px solid #f90; --black: 1px solid black; --red: 1px solid red; --pink: 1px solid pink; --blue: 1px solid blue; --green: 4px solid green; --wide-gap: 8vw; --content-gap: 16vw; --normal: calc(100vw - var(--content-gap)); --wide: calc(100vw - var(--wide-gap)); --arrow-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%2315402C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M0 0h24v24H0z' stroke='none'/%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --blank: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 7 7 17M8 7h9v9'/%3E%3C/svg%3E"); --phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke-width='1.75' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E"); --mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke-width='1.75' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); --arrow-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' stroke-width='1.5' stroke='%23005459' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 0h24v24H0z' stroke='none'/%3E%3Cpath d='M5 12h14m-4 4 4-4m-4-4 4 4'/%3E%3C/svg%3E"); --arrow-down-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M0 0h24v24H0z' stroke='none'/%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --arrow-light:url("data:image/svg+xml,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%20width%3D%2232%22%20%20height%3D%2232%22%20%20viewBox%3D%220%200%2024%2024%22%20%20fill%3D%22none%22%20%20stroke%3D%22%23ffffff%22%20%20stroke-width%3D%221.5%22%20%20stroke-linecap%3D%22round%22%20%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%207l10%2010%22%20%2F%3E%3Cpath%20d%3D%22M17%208l0%209l-9%200%22%20%2F%3E%3C%2Fsvg%3E"); --arrow-dark:url("data:image/svg+xml,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%20width%3D%2232%22%20%20height%3D%2232%22%20%20viewBox%3D%220%200%2024%2024%22%20%20fill%3D%22none%22%20%20stroke%3D%22%23000c4a%22%20%20stroke-width%3D%221.5%22%20%20stroke-linecap%3D%22round%22%20%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%207l10%2010%22%20%2F%3E%3Cpath%20d%3D%22M17%208l0%209l-9%200%22%20%2F%3E%3C%2Fsvg%3E"); --download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke-width='1.5' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2M7 11l5 5 5-5m-5-7v12'/%3E%3C/svg%3E"); /* -------------------------------- FONTS -------------------------------- */ /* Font families */ --font-data: var(--wp--preset--font-family--data); --font-body: var(--wp--preset--font-family--header); /* @link https://utopia.fyi/type/calculator?c=520,16,1.2,1240,16,1.333,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */ --text-xs: clamp(0.69rem, -0.13vi + 0.73rem, 0.6rem); --text-s: clamp(0.83rem, -0.05vi + 0.85rem, 0.8rem); --text-p: clamp(1rem, 0.08vi + 0.98rem, 1.06rem); --text-h4: clamp(1.2rem, 0.29vi + 1.13rem, 1.42rem); --text-h3: clamp(1.44rem, 0.6vi + 1.29rem, 1.89rem); --text-h2: clamp(1.73rem, 1.05vi + 1.47rem, 2.52rem); --text-h1: clamp(2.07rem, 1.71vi + 1.65rem, 3.35rem); --text-large: clamp(2.49rem, 2.64vi + 1.83rem, 4.47rem); --text-huge: clamp(2.99rem, 3.97vi + 1.99rem, 5.96rem); /* --text-xs: clamp(0.5628rem, 0.7895rem + -0.2926vw, 0.6944rem); --text-s: clamp(0.7502rem, 0.8934rem + -0.1848vw, 0.8333rem); --text-p: clamp(1rem, 1rem + 0vw, 1rem); --text-h4: clamp(1.2rem, 1.1039rem + 0.2956vw, 1.333rem); --text-h3: clamp(1.44rem, 1.1967rem + 0.7486vw, 1.7769rem); --text-h2: clamp(1.728rem, 1.2653rem + 1.4235vw, 2.3686rem); --text-h1: clamp(2.0736rem, 1.2909rem + 2.4083vw, 3.1573rem); --text-large: clamp(2.4883rem, 1.2458rem + 3.8231vw, 4.2087rem);*/ /* -------------------------------- LAYOUT -------------------------------- */ /* ESPACIO ENTRE COLUMNAS */ /* @link https://utopia.fyi/space/calculator?c=520,16,1.2,1240,19,1.333,5,2,&s=0.75|0.25,2|4|6|8|12,2xl-3xl|xl-2xl|l-xl&g=s,l,xl,12 */ /* --space-2xs: clamp(0.25rem, 0.2049rem + 0.1389vw, 0.3125rem); --space-xs: clamp(0.75rem, 0.6597rem + 0.2778vw, 0.875rem); --space-s: clamp(1rem, 0.8646rem + 0.4167vw, 1.1875rem); --space-m: clamp(2rem, 1.7292rem + 0.8333vw, 2.375rem); --space-l: clamp(4rem, 3.4583rem + 1.6667vw, 4.75rem); --space-xl: clamp(6rem, 5.1875rem + 2.5vw, 7.125rem); --space-2xl: clamp(8rem, 6.9167rem + 3.3333vw, 9.5rem); --space-3xl: clamp(12rem, 10.375rem + 5vw, 14.25rem); --space-2xl-3xl: clamp(8rem, 3.4861rem + 13.8889vw, 14.25rem); --space-xl-2xl: clamp(6rem, 3.4722rem + 7.7778vw, 9.5rem); --space-l-xl: clamp(4rem, 1.7431rem + 6.9444vw, 7.125rem);*/ --fluid-large: clamp(3rem, -0.5135rem + 14.0541vw, 9.5rem); --flow-space: var(--wp--preset--spacing--s); --ch-6: 6ch; --ch-12: 12ch; --ch-14: 14ch; --ch-24: 24ch; --ch-30: 30ch; --ch-34: 34ch; --ch-45: 45ch; --ch-65: 65ch; /* -------------------------------- SHADOWS -------------------------------- */ --shadow-s: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px; --shadow-m: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px; --shadow-card: 0 8px 14px rgba(0, 0, 0, 0.21); --shadow-brand: 0 8px 14px var(--wp--preset--color--accent-60); --shadow-color: 220 3% 15%; --shadow-strength: 1%; --shadow-1: 0 1px 2px -1px hsl(220 3% 15% / calc(1% + 9%)); --shadow-2: 0 3px 5px -2px hsl(220 3% 15% / calc(1% + 3%)), 0 7px 14px -5px hsl(220 3% 15% / calc(1% + 5%)); --shadow-3: 0 -1px 3px 0 hsl(220 3% 15% / calc(1% + 2%)), 0 1px 2px -5px hsl(220 3% 15% / calc(1% + 2%)), 0 2px 5px -5px hsl(220 3% 15% / calc(1% + 4%)), 0 4px 12px -5px hsl(220 3% 15% / calc(1% + 5%)), 0 12px 15px -5px hsl(220 3% 15% / calc(1% + 7%)); --shadow-4: 0 -2px 5px 0 hsl(220 3% 15% / calc(1% + 2%)), 0 1px 1px -2px hsl(220 3% 15% / calc(1% + 3%)), 0 2px 2px -2px hsl(220 3% 15% / calc(1% + 3%)), 0 5px 5px -2px hsl(220 3% 15% / calc(1% + 4%)), 0 9px 9px -2px hsl(220 3% 15% / calc(1% + 5%)), 0 16px 16px -2px hsl(220 3% 15% / calc(1% + 6%)); --shadow-5: 0 -1px 2px 0 hsl(220 3% 15% / calc(1% + 2%)), 0 2px 1px -2px hsl(220 3% 15% / calc(1% + 3%)), 0 5px 5px -2px hsl(220 3% 15% / calc(1% + 3%)), 0 10px 10px -2px hsl(220 3% 15% / calc(1% + 4%)), 0 20px 20px -2px hsl(220 3% 15% / calc(1% + 5%)), 0 40px 40px -2px hsl(220 3% 15% / calc(1% + 7%)); --shadow-6: 0 -1px 2px 0 hsl(220 3% 15% / calc(1% + 2%)), 0 3px 2px -2px hsl(220 3% 15% / calc(1% + 3%)), 0 7px 5px -2px hsl(220 3% 15% / calc(1% + 3%)), 0 12px 10px -2px hsl(220 3% 15% / calc(1% + 4%)), 0 22px 18px -2px hsl(220 3% 15% / calc(1% + 5%)), 0 41px 33px -2px hsl(220 3% 15% / calc(1% + 6%)), 0 100px 80px -2px hsl(220 3% 15% / calc(1% + 7%)); --inner-shadow-0: inset 0 0 0 1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)); --inner-shadow-1: inset 0 1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)); --inner-shadow-2: inset 0 1px 4px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)); --inner-shadow-3: inset 0 2px 8px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)); --inner-shadow-4: inset 0 2px 14px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)); /* -------------------------------- ICONS & RADIUS -------------------------------- */ --radiusBase: 12px; --radius-4: 4px; --radius-8: 8px; --radius-16: 16px; --radius-30: 30px; --radiusButton: 6px; --icon-12: 12px; --icon-16: 16px; --icon-20: 20px; --icon-24: 24px; --icon-36: 36px; --icon-48: 48px; --icon-64: 64px; --cubic-01:cubic-bezier(0.45,0.05,0.55,0.95); --cubic-02:cubic-bezier(0.79,0.14,0.15,0.86); --cubic-03:cubic-bezier(0.25,0.46,0.45,0.94); } @media only screen and (max-width: 1200px) { } @media only screen and (max-width: 1024px) { } @media only screen and (max-width: 820px) { :root { --wide-gap: 8vw; --content-gap: 12vw; } } @media only screen and (max-width: 512px) { :root { } }