:root { --ora: 2px solid #f90; --black: 2px solid black; --red: 2px solid red; --pink: 2px solid pink; --blue: 2px solid blue; --green: 2px solid green; --text-huge: clamp(4.375rem, 2.8846rem + 3.8462vw, 6.25rem); --text-ultra: clamp(4.375rem, 1.4936rem + 7.4359vw, 8rem); --text-mega: clamp(3.9375rem, -1.2788rem + 13.4615vw, 10.5rem); --text-page: clamp(2.75rem, -0.0321rem + 7.1795vw, 6.25rem); --wide-gap:10vw; --content-gap:20vw; /* -------------------------------- LAYOUT -------------------------------- /* ESPACIO ENTRE COLUMNAS */ /* https://utopia.fyi/space/calculator/?c=400,17,1.2,1140,17,1.333,5,2,&s=0.5|0.25,2|4|8|12|16,xl-3xl&g=s,l,xl,12 */ --space-2xs: clamp(0.25rem, 0.25rem + 0vi, 0.25rem); --space-xs: clamp(0.5625rem, 0.5625rem + 0vi, 0.5625rem); --space-s: clamp(1.0625rem, 1.0625rem + 0vi, 1.0625rem); --space-m: clamp(2.125rem, 2.125rem + 0vi, 2.125rem); /* Los 4 primeros espacios son iguales en desktop y mobile*/ --space-l: clamp(2.125rem, 0.9764rem + 4.5946vi, 4.25rem); --space-xl: clamp(4.25rem, 1.9527rem + 9.1892vi, 8.5rem); --space-2xl: clamp(8.5rem, 6.2027rem + 9.1892vi, 12.75rem); --space-3xl: clamp(12.75rem, 10.4527rem + 9.1892vi, 17rem); --space-m-xl: clamp(2.125rem, -1.3209rem + 13.7838vw, 8.5rem); --ch-6: 6ch; --ch-12: 12ch; --ch-14: 14ch; --ch-20: 20ch; --ch-30: 30ch; --ch-35: 35ch; --ch-45: 45ch; --ch-65: 65ch; /* --space-xl-3xl: clamp(8rem, 1.2903rem + 20.6452vi, 16rem);*/ /* -------------------------------- SHADOWS & GRADIENTS -------------------------------- */ --gradient-3: var(--wp--preset--color--contrast) 0%, var(--wp--preset--color--medium) 35%, var(--wp--preset--color--accent) 100%; --gradient-2: var(--wp--preset--color--contrast) 0%, var(--wp--preset--color--accent) 100%; --gradient-2B: var(--wp--preset--color--medium) 0%, var(--wp--preset--color--accent) 100%; --gradient-2C: var(--wp--preset--color--contrast) 0%, var(--wp--preset--color--medium) 100%; --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 -------------------------------- */ --buttonRadius: 6px; --cardRadius: 12px; --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); --icon: url('data:image/svg+xml,%3Csvg%20%20xmlns=%22http://www.w3.org/2000/svg%22%20%20width=%2224%22%20%20height=%2224%22%20%20viewBox=%220%200%2024%2024%22%20%20fill=%22none%22%20%20stroke=%22currentColor%22%20%20stroke-width=%221%22%20%20stroke-linecap=%22round%22%20%20stroke-linejoin=%22round%22%20%20class=%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-chart-histogram%22%3E%3Cpath%20stroke=%22none%22%20d=%22M0%200h24v24H0z%22%20fill=%22none%22/%3E%3Cpath%20d=%22M3%203v18h18%22%20/%3E%3Cpath%20d=%22M20%2018v3%22%20/%3E%3Cpath%20d=%22M16%2016v5%22%20/%3E%3Cpath%20d=%22M12%2013v8%22%20/%3E%3Cpath%20d=%22M8%2016v5%22%20/%3E%3Cpath%20d=%22M3%2011c6%200%205%20-5%209%20-5s3%205%209%205%22%20/%3E%3C/svg%3E'); --arrow-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23005459' 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"); --uk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Crect x='1' y='4' width='30' height='24' rx='4' ry='4' fill='%23071b65'/%3E%3Cpath d='M5.101 4H5a3.992 3.992 0 0 0-3.933 3.334L26.899 28H27a3.992 3.992 0 0 0 3.933-3.334L5.101 4Z' fill='%23fff'/%3E%3Cpath d='M22.25 19h-2.5l9.934 7.947c.387-.353.704-.777.929-1.257l-8.363-6.691ZM1.387 6.309 9.75 13h2.5L2.316 5.053a3.996 3.996 0 0 0-.929 1.257Z' fill='%23b92932'/%3E%3Cpath d='M5 28h.101L30.933 7.334A3.991 3.991 0 0 0 27 4h-.101L1.067 24.666A3.991 3.991 0 0 0 5 28Z' fill='%23fff'/%3E%3Cpath fill='%23fff' d='M13 4h6v24h-6z'/%3E%3Cpath fill='%23fff' d='M1 13h30v6H1z'/%3E%3Cpath fill='%23b92932' d='M14 4h4v24h-4z'/%3E%3Cpath fill='%23b92932' d='M31 14v4H1v-4zm-2.778-9.79L19 11.586V13h.75l9.943-7.94a3.98 3.98 0 0 0-1.471-.85ZM2.328 26.957a3.98 3.98 0 0 0 1.447.832L13 20.409v-1.408h-.75l-9.922 7.956Z'/%3E%3Cpath d='M27 4H5a4 4 0 0 0-4 4v16a4 4 0 0 0 4 4h22a4 4 0 0 0 4-4V8a4 4 0 0 0-4-4Zm3 20c0 1.654-1.346 3-3 3H5c-1.654 0-3-1.346-3-3V8c0-1.654 1.346-3 3-3h22c1.654 0 3 1.346 3 3v16Z' opacity='.15'/%3E%3Cpath d='M27 5H5a3 3 0 0 0-3 3v1a3 3 0 0 1 3-3h22a3 3 0 0 1 3 3V8a3 3 0 0 0-3-3Z' fill='%23fff' opacity='.2'/%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"); --video: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2224%22%20height=%2224%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.25%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M7%204v16l13-8z%22/%3E%3C/svg%3E"); } body { /* --wide-gap: 0vw;*/ /* --content-gap:0vw;*/ /* --flow-space: var(--wp--preset--spacing--m);*/ } @media only screen and (max-width: 1200px) { body { /* --wide-gap:8vw;*/ /* --content-gap:10vw;*/ /* --wp--style--global--content-size:calc(100% - var(--content-gap))!important;*/ /* --wp--style--global--wide-size:calc(100% - var(--wide-gap))!important;*/ } } @media only screen and (max-width: 1024px) { body { /* --wide-gap:6vw;*/ /* --content-gap:12vw;*/ } } @media only screen and (max-width: 820px) { :root { --wide-gap: 6vw; --content-gap: 12vw; } } @media only screen and (max-width: 512px) { }