/* ========================================================================== Grupo Kovalent · Bioquímica — folha de estilo única Base visual: Porto "Industry & Factory", recolorido com o manual da marca. Regras específicas de uma página usam o prefixo .pg- (classe no ). ========================================================================== */ /* ---- Base (fontes, tokens, reset, utilitários, header, rodapé) ---- */ @font-face { font-family: 'Montserrat Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url("../fonts/montserrat-cyrillic-ext-wght-normal.woff2") format('woff2-variations'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; } @font-face { font-family: 'Montserrat Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url("../fonts/montserrat-cyrillic-wght-normal.woff2") format('woff2-variations'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face { font-family: 'Montserrat Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url("../fonts/montserrat-vietnamese-wght-normal.woff2") format('woff2-variations'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; } @font-face { font-family: 'Montserrat Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url("../fonts/montserrat-latin-ext-wght-normal.woff2") format('woff2-variations'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'Montserrat Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url("../fonts/montserrat-latin-wght-normal.woff2") format('woff2-variations'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } :root { --navy: #01294e; --navy-900: #001a33; --blue-700: #0875aa; --blue-800: #06628f; --blue-500: #088fd1; --blue-400: #00aeef; --aqua-300: #93d6e1; --grey-500: #939598; --ice: #eef7f9; --ice-200: #dcedf2; --ink: #3c4650; --muted: #5d6873; --line: #d9e3e8; --white: #fff; --primary: var(--blue-700); --font: "Montserrat Variable", "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --fs-caption: 0.875rem; --fs-body: 1.0625rem; --fs-lead: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem); --fs-h4: clamp(1.125rem, 1.05rem + 0.3vw, 1.3rem); --fs-h3: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); --fs-h2: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); --fs-h1: clamp(2.1rem, 1.5rem + 2.6vw, 3.5rem); --fs-display: clamp(2.4rem, 1.6rem + 3.4vw, 4.25rem); --gutter: clamp(1rem, 0.6rem + 1.8vw, 2rem); --section: clamp(4rem, 3rem + 4vw, 7rem); --radius: 8px; --radius-lg: 32px; --container: 1200px; --shadow-1: 0 10px 30px -12px rgb(1 41 78 / 0.18); --shadow-2: 0 30px 60px -30px rgb(1 41 78 / 0.45); --ease: cubic-bezier(0.2, 0.7, 0.2, 1); } *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; } body { min-height: 100svh; font-family: var(--font); font-size: var(--fs-body); font-weight: 400; line-height: 1.65; color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; overflow-x: clip; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } h1, h2, h3, h4, p, li { overflow-wrap: break-word; } h1, h2, h3, h4 { color: var(--navy); line-height: 1.15; font-weight: 700; text-wrap: balance; } p { text-wrap: pretty; } a { color: var(--primary); text-underline-offset: 3px; } a:hover { color: var(--blue-800); } :focus-visible { outline: 3px solid var(--blue-400); outline-offset: 3px; border-radius: 2px; } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } strong, b { font-weight: 700; } table { border-collapse: collapse; width: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } [x-cloak] { display: none !important; } .container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } .section { position: relative; padding-block: var(--section); } .section--ice { background: var(--ice); } .section--navy { background: var(--navy); color: #c9d6e2; } .section--navy :is(h1, h2, h3, h4) { color: var(--white); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 1rem; top: -100px; z-index: 100; background: var(--navy); color: #fff; padding: 0.75rem 1rem; border-radius: var(--radius); } .skip-link:focus { top: 1rem; } .lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--muted); } .center { text-align: center; } .measure { max-width: 65ch; } .center.measure, .center .measure { margin-inline: auto; } .eyebrow { display: block; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--primary); margin-bottom: 0.5rem; } .section--navy .eyebrow { color: var(--aqua-300); } .title-light { font-weight: 300; } .h-display { font-size: var(--fs-display); line-height: 1.05; letter-spacing: -0.01em; } .h1 { font-size: var(--fs-h1); } .h2 { font-size: var(--fs-h2); } .h3 { font-size: var(--fs-h3); } .is-placeholder { outline: 1px dashed var(--grey-500); outline-offset: 4px; } .tag-exemplo { display: inline-block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.15rem 0.45rem; border-radius: 99px; background: #fff4d6; color: #7a5600; vertical-align: middle; } .btn { --btn-fg: var(--navy); --btn-stroke: var(--line); --btn-fill: transparent; --btn-fill-hover: transparent; --btn-stroke-hover: var(--primary); --btn-fg-hover: var(--primary); position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 56px; padding: 1rem 3.4rem 1rem 2.6rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--btn-fg); background: none; border: 0; cursor: pointer; transition: color 0.3s var(--ease); } .btn__bg { position: absolute; inset: -10% -3.5%; width: 107%; height: 120%; z-index: -1; overflow: visible; } .btn__bg polygon { fill: var(--btn-fill); stroke: var(--btn-stroke); stroke-width: 2; vector-effect: non-scaling-stroke; transition: fill 0.3s var(--ease), stroke 0.3s var(--ease); } .btn__arrow { width: 17px; fill: currentColor; transition: transform 0.3s var(--ease); } .btn:hover { color: var(--btn-fg-hover); } .btn:hover .btn__bg polygon { fill: var(--btn-fill-hover); stroke: var(--btn-stroke-hover); } .btn:hover .btn__arrow { transform: translateX(4px); } .btn--solid { --btn-fg: #fff; --btn-fg-hover: #fff; --btn-stroke: var(--primary); --btn-fill: var(--primary); --btn-fill-hover: var(--blue-800); --btn-stroke-hover: var(--blue-800); } .btn--light { --btn-fg: #fff; --btn-stroke: #fff; --btn-fill-hover: #fff; --btn-stroke-hover: #fff; --btn-fg-hover: var(--navy); } .btn--sm { min-height: 48px; padding: 0.75rem 2.2rem 0.75rem 1.6rem; font-size: 0.75rem; } .btn-row { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; align-items: center; } .read-more { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--primary); min-height: 44px; } .read-more svg { width: 17px; fill: currentColor; transition: transform 0.3s var(--ease); } .read-more:hover svg { transform: translateX(6px); } .section--navy .read-more { color: var(--aqua-300); } .check-list { list-style: none; padding: 0; display: grid; gap: 0.85rem; } .check-list li { position: relative; padding-left: 3.1rem; min-height: 2.25rem; display: flex; align-items: center; font-weight: 500; color: var(--navy); line-height: 1.4; } .check-list li::before { content: ""; position: absolute; left: 0; top: 50%; translate: 0 -50%; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--line); background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%230875aa' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 55% no-repeat; } .section--navy .check-list li { color: #fff; } .section--navy .check-list li::before { border-color: rgb(255 255 255 / 0.25); background-color: transparent; } .dot-list { padding-left: 1.2rem; display: grid; gap: 0.6rem; } .dot-list li::marker { color: var(--navy); } .panel { background: var(--ice); border-radius: var(--radius-lg); padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); } .panel__tab { display: inline-block; margin: calc(-1 * clamp(1.5rem, 1rem + 2vw, 2.75rem)) 0 1.5rem calc(-1 * clamp(0.5rem, 0.2rem + 1vw, 1rem)); translate: 0 -40%; background: var(--blue-700); color: #fff; font-weight: 700; font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.7rem 1.5rem; border-radius: 99px; } .table-wrap { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow-1); background: #fff; } .table th, .table td { padding: 0.95rem 1.25rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); } .table thead th { background: var(--navy); color: #fff; font-weight: 700; font-size: 0.9375rem; border-bottom: 0; white-space: nowrap; } .table tbody tr:nth-child(even) { background: #f7fbfc; } .table tbody th, .table td:first-child { font-weight: 600; color: var(--navy); } .form-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .span-2 { grid-column: 1 / -1; } } .field { display: grid; gap: 0.35rem; } .field label, .field legend { font-size: 0.8125rem; font-weight: 600; color: var(--navy); } .field .req { color: var(--blue-700); } .input { width: 100%; min-height: 56px; padding: 0.95rem 1.2rem; font-size: 1rem; background: var(--ice); border: 1px solid var(--ice); border-radius: 4px; transition: border-color 0.2s, background 0.2s; } .input:hover { border-color: var(--ice-200); } .input:focus { outline: none; background: #fff; border-color: var(--blue-700); box-shadow: 0 0 0 3px rgb(8 117 170 / 0.18); } textarea.input { min-height: 140px; resize: vertical; } select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2301294e' stroke-width='2' d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 18px; padding-right: 3rem; } .checkbox { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.875rem; line-height: 1.5; color: var(--muted); } .checkbox input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--blue-700); flex: none; } .form-note { font-size: 0.8125rem; color: var(--muted); } .grid { display: grid; gap: var(--gap, 1.5rem); } @media (min-width: 768px) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 992px) { .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid--split { grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(2rem, 1rem + 4vw, 5rem); } } @media (min-width: 576px) and (max-width: 991px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .stack > * + * { margin-top: var(--stack, 1rem); } .js [data-appear] { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay: var(--delay, 0ms); } .js [data-appear="left"] { transform: translate3d(-32px, 0, 0); } .js [data-appear="right"] { transform: translate3d(32px, 0, 0); } .js [data-appear="mask"] { transform: translate3d(0, 100%, 0); } .js [data-appear].is-in { opacity: 1; transform: none; } .mask { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .js [data-appear] { opacity: 1; transform: none; } } .hdr { position: sticky; top: 0; z-index: 50; background: #fff; box-shadow: 0 1px 0 var(--line); transition: box-shadow 0.3s; } .hdr.is-scrolled { box-shadow: 0 8px 30px -16px rgb(1 41 78 / 0.35); } .hdr__top { background: var(--ice); font-size: 0.8125rem; color: var(--navy); transition: margin-top 0.3s var(--ease); } .hdr.is-scrolled .hdr__top { margin-top: -40px; } .hdr__top-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 40px; } .hdr__line { letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.75rem; } .hdr__contacts { display: flex; gap: 1.5rem; list-style: none; padding: 0; } .hdr__contacts a { color: var(--navy); text-decoration: none; } .hdr__contacts a:hover { color: var(--primary); } .hdr__main-in { display: flex; align-items: center; gap: 1.5rem; min-height: 88px; transition: min-height 0.3s var(--ease); } .hdr.is-scrolled .hdr__main-in { min-height: 72px; } .hdr__logo { margin-right: auto; flex: none; } .hdr__logo img { width: clamp(132px,10vw + 60px,170px); height: auto; } .nav__list { display: flex; gap: 0.25rem; } .nav__link { position: relative; display: inline-flex; align-items: center; min-height: 48px; padding: 0 1rem; font-size: 0.9375rem; font-weight: 600; color: var(--navy); text-decoration: none; } .nav__link::after { content: ""; position: absolute; left: 1rem; right: 1rem; bottom: 8px; height: 2px; background: var(--blue-500); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); } .nav__link:hover, .nav__link[aria-current=page] { color: var(--primary); } .nav__link:hover::after, .nav__link[aria-current=page]::after { transform: scaleX(1); } .mnav { display: none; } @media (max-width: 1099px) { .nav, .hdr__cta { display: none!important; } .mnav { display: block; } } @media (max-width: 575px) { .hide-sm { display: none; } .hdr__line { display: none; } .hdr__top-in { justify-content: center; } } .mnav__toggle { border: 0; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 4px; background: var(--navy); cursor: pointer; } .mnav__bars, .mnav__bars::before, .mnav__bars::after { display: block; width: 20px; height: 2px; background: #fff; transition: transform 0.25s,opacity 0.25s; } .mnav__bars { position: relative; } .mnav__bars::before, .mnav__bars::after { content: ""; position: absolute; left: 0; } .mnav__bars::before { top: -6px; } .mnav__bars::after { top: 6px; } .mnav.is-open .mnav__bars { background: transparent; } .mnav.is-open .mnav__bars::before { transform: translateY(6px) rotate(45deg); } .mnav.is-open .mnav__bars::after { transform: translateY(-6px) rotate(-45deg); } .mnav__panel { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 20px 40px -20px rgb(1 41 78 / 0.4); padding: 1rem var(--gutter) 2rem; display: grid; gap: 1.25rem; justify-items: start; max-height: calc(100svh - 120px); overflow-y: auto; } .mnav__panel ul { width: 100%; } .mnav__panel li a { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--line); font-weight: 600; color: var(--navy); text-decoration: none; } .mnav__panel li a[aria-current=page] { color: var(--primary); } .mnav__sac { font-size: 0.875rem; } .wave { position: absolute; left: 0; right: 0; height: clamp(48px,7vw,120px); pointer-events: none; z-index: 1; } .wave svg { width: 100%; height: 100%; } .wave--bottom { bottom: -1px; } .wave--top { top: -1px; transform: rotate(180deg); } .wave--flip svg { transform: scaleX(-1); } .ftr { position: relative; background: var(--navy); color: #b9c7d5; padding-top: clamp(6rem,4rem + 6vw,9rem); font-size: 0.9375rem; } .ftr a { color: #d7e2ec; text-decoration: none; } .ftr a:hover { color: var(--aqua-300); } .ftr__grid { display: grid; gap: 2.5rem; padding-bottom: 3rem; } @media (min-width: 768px) { .ftr__grid { grid-template-columns: repeat(2,1fr); } } @media (min-width: 1100px) { .ftr__grid { grid-template-columns: 1.3fr 0.8fr 0.8fr 1.2fr; gap: 3rem; } } .ftr__brand img { width: 190px; height: auto; margin-bottom: 1rem; } .ftr__sig { color: var(--aqua-300); font-weight: 600; margin-bottom: 0.75rem; } .ftr__social { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin-top: 1.25rem; } .ftr__social a { display: inline-flex; min-height: 44px; align-items: center; font-weight: 600; } .ftr__h { color: #fff; font-size: 0.875rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 1.25rem; } .ftr__list li+li { margin-top: 0.1rem; } .ftr__list a { display: inline-flex; min-height: 36px; align-items: center; } .ftr__list--sep li { padding-block: 0.7rem; } .ftr__list--sep li+li { border-top: 1px solid rgb(255 255 255 / 0.1); } .ftr__list--sep a { min-height: 0; display: inline; } .ftr__copy { border-top: 1px solid rgb(255 255 255 / 0.1); padding-block: 1.5rem 2rem; font-size: 0.8125rem; text-align: center; } /* ---- Componente: SectionTitle ---- */ .st { margin-bottom: clamp(1.5rem,1rem + 1.5vw,2.5rem); } .st :is(h1,h2,h3) { margin-top: 0.1rem; } /* ---- Componente: CurveLines ---- */ .stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.5rem; } @media (min-width: 992px) { .stats { grid-template-columns: repeat(4,minmax(0,1fr)); } } .stat { display: grid; gap: 0.35rem; align-content: start; padding: 1.25rem 0 0.25rem 1.25rem; border-left: 3px solid var(--blue-500); } .stat__v { font-size: clamp(2rem,1.5rem + 2vw,3rem); font-weight: 800; line-height: 1; color: var(--navy); letter-spacing: -0.02em; } .stat__l { font-size: 0.9375rem; color: var(--muted); line-height: 1.4; } .stats--navy .stat__v { color: #fff; } .stats--navy .stat__l { color: #c3d2df; } .stats--navy .stat { border-color: var(--aqua-300); } .stat .tag-exemplo { justify-self: start; } .certs { display: grid; gap: 1rem; } @media (min-width: 768px) { .certs { grid-template-columns: repeat(2,1fr); } } @media (min-width: 1100px) { .certs { grid-template-columns: repeat(4,1fr); } } .cert { display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem; background: #fff; border-radius: 4px; border: 1px solid var(--line); } .cert>span:last-child { display: grid; gap: 0.2rem; font-size: 0.875rem; color: var(--muted); } .cert strong { color: var(--navy); font-size: 1rem; } .cert__icon { color: var(--blue-700); flex: none; } .cert .tag-exemplo { justify-self: start; } .clients { margin-top: clamp(2.5rem,2rem + 2vw,4rem); text-align: center; } .clients__t { font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 1.5rem; } .clients__list { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; } @media (min-width: 768px) { .clients__list { grid-template-columns: repeat(6,1fr); } } .clients__list li { display: grid; place-items: center; min-height: 80px; } .clients__list img { filter: grayscale(1); opacity: 0.75; transition: 0.3s; } .clients__list img:hover { filter: none; opacity: 1; } .clients__slot { background: #fff; border-radius: 4px; font-size: 0.75rem; color: var(--grey-500); font-weight: 600; } .curves { position: absolute; width: min(55vw,640px); pointer-events: none; z-index: 0; opacity: 0.9; } .curves--tr { top: 0; right: 0; transform: scaleX(-1) translateY(-35%); } .curves--tl { top: 0; left: 0; transform: translateY(-35%); } .curves--br { bottom: 0; right: 0; transform: rotate(180deg) translateY(-35%); } .curves--bl { bottom: 0; left: 0; transform: scaleY(-1) translateY(-35%); } /* ---- Componente: MykovCard ---- */ .sig { display: inline-flex; align-items: center; line-height: 0; margin: 0; } .sig img { height: auto; max-width: 100%; } .sig--dark { background: #fff; border-radius: 99px; padding: 0.45rem 1rem 0.45rem 1.1rem; } .mk { height: 100%; } .mk__link { display: flex; flex-direction: column; height: 100%; background: #fff; color: inherit; text-decoration: none; box-shadow: var(--shadow-1); border-radius: 4px; overflow: hidden; transition: transform 0.35s var(--ease),box-shadow 0.35s var(--ease); } .mk__link:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); color: inherit; } .mk__band { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem; background: var(--navy); transition: background 0.3s; } .mk__link:hover .mk__band { background: var(--blue-700); } .mk__tipo { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--aqua-300); } .mk__link:hover .mk__tipo { color: #fff; } .mk__th { font-size: 0.8125rem; color: #c3d2df; } .mk__th strong { color: #fff; } .mk__img { position: relative; padding: 1.25rem 1.5rem 0.5rem; background: radial-gradient(70% 60% at 50% 55%,#fff 0%,var(--ice) 100%); } .mk__img img { transition: transform 0.5s var(--ease),filter 0.5s var(--ease); filter: saturate(0.85); } .mk__link:hover .mk__img img { transform: scale(1.04); filter: saturate(1); } .mk__body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem 1.5rem 1.5rem; flex: 1; } .mk__body .mk__title { margin-bottom: 0.1rem; min-height: 60px; } .mk__porte { font-size: 0.875rem; color: var(--muted); } .mk__data { display: grid; gap: 0.5rem; margin: 0.5rem 0 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--line); font-size: 0.875rem; } .mk__data div { display: flex; justify-content: space-between; gap: 1rem; } .mk__data dt { color: var(--muted); } .mk__data dd { text-align: right; color: var(--navy); } .mk__data dd span { color: var(--muted); font-size: 0.8125rem; } .mk__more { margin-top: auto; display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); } .mk__more svg { width: 17px; fill: currentColor; transition: transform 0.3s var(--ease); } .mk__link:hover .mk__more svg { transform: translateX(6px); } /* ---- Componente: ImgSlot ---- */ .slot { position: relative; display: grid; place-content: center; justify-items: center; gap: 0.75rem; width: 100%; padding: 1.25rem; background: radial-gradient(120% 90% at 85% 10%,rgb(147 214 225 / 0.55),transparent 60%),linear-gradient(160deg,var(--ice) 0%,var(--ice-200) 100%); color: var(--navy); text-align: center; overflow: hidden; } .slot--circle { border-radius: 50%; } .slot--cutout { background: radial-gradient(60% 45% at 50% 85%,rgb(1 41 78 / 0.12),transparent 70%); } .slot__icon { width: clamp(36px,18%,64px); fill: var(--blue-500); stroke: var(--blue-500); stroke-width: 3; opacity: 0.55; } .slot__label { max-width: 28ch; font-size: 0.8125rem; font-weight: 600; line-height: 1.35; color: var(--muted); } .slot--circle .slot__label { font-size: 0.75rem; max-width: 14ch; } .slot-img { width: 100%; height: auto; object-fit: cover; } .slot-img.slot--circle { border-radius: 50%; } .slot-img.slot--cutout { object-fit: contain; } /* ---- Componente: RoutineRuler ---- */ .rr { --name: 136px; position: relative; } .rr__scale { position: relative; height: 1.5rem; margin-left: var(--name); font-size: 0.75rem; color: var(--muted); border-bottom: 1px solid var(--line); margin-bottom: 0.75rem; } .rr__scale span { position: absolute; translate: -50% 0; white-space: nowrap; } .rr__scale span:first-child { translate: 0 0; } .rr__scale span:last-child { translate: -100% 0; } .rr__rows { display: grid; gap: 0.6rem; } .rr__row { display: grid; grid-template-columns: var(--name) 1fr; align-items: center; } .rr__name { text-decoration: none; min-height: 44px; display: flex; align-items: center; } .rr__track { position: relative; height: 44px; background: repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),var(--line) calc(25% - 1px) 25%); border-radius: 4px; } .rr__bar { position: absolute; top: 10px; bottom: 10px; border-radius: 99px; background: linear-gradient(90deg,var(--blue-700),var(--blue-500)); } .rr__lbl { position: absolute; top: 50%; translate: 0 -50%; color: var(--navy); font-size: 0.75rem; font-weight: 600; white-space: nowrap; background: #fff; padding: 0.1rem 0.35rem; } .rr__note { margin-top: 1rem; font-size: 0.8125rem; color: var(--muted); } @media (max-width: 767px) { .rr { --name: 0px; } .rr__scale { display: none; } .rr__row { grid-template-columns: 1fr; gap: 0.25rem; } .rr__track { height: auto; padding-top: 20px; background: linear-gradient(var(--ice-200),var(--ice-200)) 0 3px / 100% 8px no-repeat; } .rr__bar { top: 0; bottom: auto; height: 14px; } .rr__lbl { position: static; translate: none; display: block; } } /* ---- Componente: FeatureCards ---- */ .fc { --gap: 1.5rem; } .fc__item { display: grid; align-content: start; gap: 0.7rem; padding: 2rem 1.75rem; background: #fff; border-top: 3px solid var(--blue-500); box-shadow: var(--shadow-1); border-radius: 0 0 4px 4px; } .fc__icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--ice); color: var(--blue-700); margin-bottom: 0.4rem; } .fc__t { font-size: 1.125rem; } .fc__p { font-size: 0.9375rem; color: var(--muted); } .fc__a { font-size: 0.875rem; font-weight: 600; text-decoration: none; margin-top: 0.25rem; } .fc--navy .fc__item { background: rgb(255 255 255 / 0.04); box-shadow: none; border-top-color: var(--aqua-300); } .fc--navy .fc__icon { background: rgb(147 214 225 / 0.14); color: var(--aqua-300); } .fc--navy .fc__p { color: #c3d2df; } /* ---- Página: inicio ---- */ .steps { display: grid; gap: 2.5rem 2rem; counter-reset: s; } @media (min-width: 768px) { .steps { grid-template-columns: repeat(2,1fr); } } @media (min-width: 1100px) { .steps { grid-template-columns: repeat(var(--n),1fr); } } .step { position: relative; text-align: center; display: grid; justify-items: center; gap: 0.6rem; } @media (min-width: 1100px) { .step:not(:last-child)::after { content: ""; position: absolute; top: 55px; left: calc(50% + 70px); right: calc(-50% + 70px - 2rem); border-top: 2px dashed var(--line); } } .step__circle { display: grid; place-items: center; width: 110px; height: 110px; border-radius: 50%; border: 2px solid var(--line); font-size: 2.2rem; font-weight: 800; color: var(--navy); background: #fff; transition: border-color 0.3s,color 0.3s,background 0.3s; margin-bottom: 0.5rem; } .step:hover .step__circle { border-color: var(--blue-700); background: var(--blue-700); color: #fff; } .step__t { font-size: 1.125rem; letter-spacing: 0.02em; } .step__p { color: var(--muted); font-size: 0.9375rem; max-width: 30ch; } .tst { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px,88%); gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0.5rem 0.25rem 1.5rem; scrollbar-width: thin; } @media (min-width: 768px) { .tst { grid-auto-columns: minmax(300px,46%); } } @media (min-width: 1100px) { .tst { grid-auto-flow: row; grid-template-columns: repeat(3,1fr); overflow: visible; } } .tst__item { scroll-snap-align: start; display: flex; flex-direction: column; gap: 1.5rem; padding: 2rem; background: #fff; border-radius: 4px; box-shadow: var(--shadow-1); } .tst blockquote { position: relative; padding-top: 2.25rem; color: var(--ink); font-size: 1rem; line-height: 1.65; } .tst blockquote::before { content: "“"; position: absolute; top: -0.6rem; left: -0.2rem; font-size: 4.5rem; line-height: 1; font-weight: 800; color: var(--blue-500); } .tst figcaption { margin-top: auto; display: flex; gap: 0.9rem; align-items: center; font-size: 0.875rem; } .tst figcaption>span:last-child { display: grid; gap: 0.15rem; } .tst figcaption strong { color: var(--navy); } .tst figcaption span span { color: var(--muted); } .tst__avatar { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--ice); color: var(--blue-700); font-weight: 800; } .tag-exemplo { justify-self: start; margin-top: 0.25rem; } .pg-inicio .pt-0 { padding-top: 0; } .pg-inicio .mt-md { margin-top: 2rem; } .pg-inicio .mt-lg { margin-top: clamp(2.5rem,2rem + 2vw,4rem); } .pg-inicio .section--tight { padding-block: clamp(2.5rem,2rem + 2vw,4rem); } .pg-inicio .hero { position: relative; overflow: hidden; padding: clamp(2.5rem,1.5rem + 4vw,5rem) 0 clamp(6rem,5rem + 6vw,10rem); background: radial-gradient(60% 70% at 85% 30%,rgb(147 214 225 / 0.45),transparent 70%),linear-gradient(180deg,#fff 0%,var(--ice) 100%); } .pg-inicio .hero__in { position: relative; z-index: 2; display: grid; gap: 3rem; align-items: center; } @media (min-width: 992px) { .pg-inicio .hero__in { grid-template-columns: 1.05fr 0.95fr; } } .pg-inicio .hero__copy h1 { max-width: 14ch; } .pg-inicio .hero__copy h1 .title-light { display: block; color: var(--blue-500); } .pg-inicio .hero__lead { margin: 1.5rem 0 2.25rem; max-width: 48ch; } .pg-inicio .hero__media { position: relative; max-width: 640px; width: 100%; justify-self: center; } .pg-inicio .hero__media>img { filter: drop-shadow(0 30px 40px rgb(1 41 78 / 0.18)); } .pg-inicio .hero__seal { position: absolute; right: 2%; bottom: -4%; display: grid; gap: 0.4rem; padding: 0.9rem 1.2rem; background: #fff; border-radius: 16px; box-shadow: var(--shadow-1); font-size: 0.875rem; color: var(--muted); text-decoration: none; transition: transform 0.3s var(--ease); } .pg-inicio .hero__seal:hover { transform: translateY(-3px); color: var(--muted); } .pg-inicio .hero__seal strong { color: var(--navy); } .pg-inicio .cards { margin-top: clamp(2rem,1.5rem + 2vw,3.5rem); --gap: 1.75rem; } .pg-inicio .cards>li { height: 100%; } .pg-inicio .ruler-grid { align-items: start; } .pg-inicio .reag { background: var(--ice); padding-block: clamp(6rem,5rem + 5vw,9rem); } .pg-inicio .reag__media { border-radius: var(--radius-lg); background: radial-gradient(65% 60% at 50% 55%,#fff 0%,rgb(255 255 255 / 0) 100%); padding: clamp(1rem,0.5rem + 2vw,2.5rem); } .pg-inicio .reag__media img { filter: drop-shadow(0 24px 30px rgb(1 41 78 / 0.18)); } .pg-inicio .diff { overflow: hidden; } .pg-inicio .diff__mol { position: absolute; left: -8%; bottom: -20%; width: min(60vw,640px); aspect-ratio: 1; background: url("../img/brand/simbolo.svg") center / contain no-repeat; opacity: 0.06; } .pg-inicio .contact { padding-top: 0; } .pg-inicio .contact__grid { display: grid; gap: 3rem; } @media (min-width: 992px) { .pg-inicio .contact__grid { grid-template-columns: 0.8fr 1.2fr; gap: 4rem; align-items: start; } } .pg-inicio .contact__list { margin-top: 2rem; display: grid; border-top: 1px solid var(--line); } .pg-inicio .contact__list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--line); font-size: 0.9375rem; } .pg-inicio .contact__list span { color: var(--muted); } .pg-inicio .contact__list a { color: var(--navy); text-decoration: none; } .pg-inicio .contact__list a:hover { color: var(--primary); } .pg-inicio .contact__form { background: #fff; padding: clamp(1.5rem,1rem + 2vw,2.75rem); border-radius: 4px; box-shadow: var(--shadow-1); } /* ---- Componente: LeadForm ---- */ .lead__ref { margin-bottom: 1.25rem; padding: 0.85rem 1.1rem; border-left: 4px solid var(--blue-500); background: var(--ice); color: var(--navy); font-size: 0.9375rem; } .lead__checks { display: grid; gap: 0.75rem; margin-top: 0.25rem; } .lead__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 0.75rem; } .lead__submit .form-note { flex: 1 1 220px; } /* ---- Componente: PageHeader ---- */ .ph { position: relative; overflow: hidden; background: radial-gradient(70% 120% at 100% 0%,rgb(8 143 209 / 0.55),transparent 60%),radial-gradient(50% 80% at 0% 100%,rgb(147 214 225 / 0.25),transparent 60%),var(--navy); color: #cfdbe6; padding: clamp(2.75rem,2rem + 3vw,4.5rem) 0 clamp(5rem,4rem + 5vw,8rem); } .ph__mol { position: absolute; right: -4%; top: 50%; width: min(46vw,520px); aspect-ratio: 1; translate: 0 -50%; background: url("../img/brand/simbolo.svg") center / contain no-repeat; opacity: 0.08; filter: grayscale(1) brightness(3); } .ph__in { position: relative; z-index: 2; } .ph h1 { color: #fff; max-width: 22ch; } .ph .eyebrow { color: var(--aqua-300); } .ph__intro { margin-top: 1rem; max-width: 60ch; font-size: var(--fs-lead); color: #d4e1ec; } .ph__crumbs { margin-bottom: 1.5rem; font-size: 0.8125rem; } .ph__crumbs ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0; } .ph__crumbs li+li::before { content: "/"; margin: 0 0.6rem; opacity: 0.5; } .ph__crumbs a { color: var(--aqua-300); text-decoration: none; } .ph__crumbs a:hover { text-decoration: underline; } /* ---- Página: cotizacion ---- */ .pg-cotizacion .pt-sm { padding-top: clamp(2rem,1.5rem + 2vw,3.5rem); } .pg-cotizacion .wrap { display: grid; gap: 2.5rem; } @media (min-width: 992px) { .pg-cotizacion .wrap { grid-template-columns: 1.6fr 1fr; gap: 3rem; align-items: start; } } .pg-cotizacion .form-card { background: #fff; padding: clamp(1.5rem,1rem + 2vw,2.75rem); border-radius: 4px; box-shadow: var(--shadow-1); } .pg-cotizacion .side { display: grid; gap: 1rem; } .pg-cotizacion .side__box { display: grid; gap: 0.35rem; padding: 1.5rem; border-radius: 12px; background: var(--ice); font-size: 0.9375rem; } .pg-cotizacion .side__box--hl { background: var(--navy); color: #c3d2df; } .pg-cotizacion .side__box--hl .icon { color: var(--aqua-300); margin-bottom: 0.25rem; } .pg-cotizacion .side__box--hl .big { color: #fff; font-size: 1.75rem; font-weight: 800; text-decoration: none; } .pg-cotizacion .side__h { font-size: 0.875rem; letter-spacing: 0.12em; text-transform: uppercase; } .pg-cotizacion .small { font-size: 0.8125rem; color: var(--muted); } .pg-cotizacion .side__box--hl .small { color: #c3d2df; } .pg-cotizacion address { font-style: normal; } /* ---- Página: equipos ---- */ .cmp { min-width: 860px; font-size: 0.9375rem; } .cmp thead a { color: #fff; text-decoration: none; } .cmp thead a:hover { color: var(--aqua-300); text-decoration: underline; } .cmp tbody th { text-align: left; white-space: nowrap; background: var(--ice); } .cmp td { font-weight: 400!important; color: var(--ink)!important; } .pg-equipos .pt-sm { padding-top: clamp(2rem,1.5rem + 2vw,3.5rem); } .pg-equipos .mt-sm { margin-top: 0.75rem; } .pg-equipos .mt-md { margin-top: 2rem; } .pg-equipos .feat { columns: 1; } @media (min-width: 576px) { .pg-equipos .feat { display: block; columns: 2; column-gap: 2rem; } .pg-equipos .feat li { break-inside: avoid; margin-bottom: 0.6rem; } } .pg-equipos .notes { margin-top: 1.25rem; font-size: 0.8125rem; color: var(--muted); } .pg-equipos .cards { --gap: 1.5rem; } .pg-equipos .cards>li { height: 100%; } @media (min-width: 992px) { .pg-equipos .cards--piso { max-width: 820px; } } .pg-equipos .piso { margin-top: clamp(3rem,2.5rem + 3vw,5rem); } .pg-equipos .ruler { margin-top: clamp(3rem,2.5rem + 3vw,5rem); align-items: start; } /* ---- Componente: CtaBand ---- */ .cta { position: relative; overflow: hidden; background: var(--navy); padding-block: clamp(3.5rem,2.5rem + 4vw,6rem); } .cta__waves { position: absolute; inset: 0; width: 100%; height: 100%; } .cta__in { position: relative; display: grid; gap: 2rem; align-items: center; } @media (min-width: 992px) { .cta__in { grid-template-columns: 1fr auto; gap: 4rem; } } .cta__t { color: #fff; font-size: var(--fs-h2); letter-spacing: 0.01em; max-width: 24ch; } .cta__p { margin-top: 0.75rem; color: #d4e1ec; max-width: 58ch; } /* ---- Página: gracias ---- */ .pg-gracias .row { justify-content: center; margin-top: 2rem; } /* ---- Página: institucional ---- */ .pg-institucional .pt-sm { padding-top: clamp(2rem,1.5rem + 2vw,3.5rem); } .pg-institucional .mt-lg { margin-top: clamp(2.5rem,2rem + 2vw,4rem); } .pg-institucional .section--tight { padding-block: clamp(2rem,1.5rem + 2vw,3.5rem); } .pg-institucional .facades { position: relative; max-width: 500px; width: 100%; justify-self: center; padding: 0 0 14% 0; } .pg-institucional .facade { width: 88%; margin-left: auto; border-radius: 50%; box-shadow: var(--shadow-2); overflow: hidden; } .pg-institucional .facade--sm { position: absolute; left: 0; bottom: 0; width: 44%; border: 6px solid #fff; } .pg-institucional .facade--sm img { object-position: 80% 45%; } .pg-institucional .eq-wrap { border-block: 1px solid var(--line); } .pg-institucional .eq { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.25rem clamp(1rem,0.5rem + 2vw,2.5rem); } .pg-institucional .eq img { height: clamp(34px,2rem + 1.5vw,56px); width: auto; } .pg-institucional .eq__op { font-size: clamp(1.75rem,1.2rem + 2vw,2.75rem); font-weight: 300; color: var(--grey-500); } .pg-institucional .tl-sec { overflow: hidden; } .tl-curves { opacity: 0.4!important; } .pg-institucional .tl { position: relative; display: grid; gap: 2rem; } @media (min-width: 992px) { .pg-institucional .tl { grid-template-columns: repeat(4,1fr); } .pg-institucional .tl::before { content: ""; position: absolute; left: 0; right: 0; top: 1.6rem; border-top: 1px solid rgb(255 255 255 / 0.2); } } .pg-institucional .tl__item { position: relative; display: grid; align-content: start; gap: 0.6rem; color: #c3d2df; font-size: 0.9375rem; } .pg-institucional .tl__ano { position: relative; justify-self: start; font-size: 1.5rem; font-weight: 800; color: var(--navy); background: var(--aqua-300); padding: 0.35rem 1rem; border-radius: 99px; margin-bottom: 0.5rem; } .pg-institucional .tl__t { font-size: 1.125rem; } .pg-institucional .tl .tag-exemplo { justify-self: start; } .pg-institucional .qr-media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-2); } .pg-institucional .qr-steps { display: grid; gap: 1rem; margin-top: 1.75rem; } .pg-institucional .qr-steps li { display: flex; gap: 1rem; align-items: center; padding: 1rem 1.25rem; background: #fff; border-radius: 12px; box-shadow: var(--shadow-1); } .pg-institucional .qr-steps .icon { color: var(--blue-700); flex: none; } .pg-institucional .academy { display: flex; align-items: center; gap: 1rem; margin: 0.5rem 0 1.5rem; line-height: 1; } .pg-institucional .academy__icon { display: grid; place-items: center; width: 84px; height: 70px; border-radius: 8px; background: var(--navy); color: var(--aqua-300); flex: none; } .pg-institucional .academy strong { font-size: clamp(1.5rem,1.2rem + 1vw,2rem); font-weight: 800; letter-spacing: 0.01em; } .pg-institucional .academy__cta { margin-top: 2rem; } .pg-institucional .academy em { display: block; font-size: 1.25rem; color: var(--blue-500); font-weight: 700; margin-top: 0.3rem; } /* ---- Página: privacidad ---- */ .pg-privacidad .legal { margin-inline: auto; } /* ---- Página: reactivos ---- */ .acc { display: grid; gap: 0.75rem; } .acc__item { background: #fff; border: 1px solid var(--line); border-radius: 4px; transition: box-shadow 0.3s; } .acc__item[open] { box-shadow: var(--shadow-1); border-color: transparent; } .acc__sum { display: grid; grid-template-columns: 1fr auto 28px; gap: 1rem; align-items: center; padding: 1.25rem 1.5rem; cursor: pointer; list-style: none; min-height: 64px; } .acc__sum::-webkit-details-marker { display: none; } .acc__sum:hover strong { color: var(--primary); } .acc__title { display: grid; gap: 0.15rem; } .acc__title strong { color: var(--navy); font-size: 1.0625rem; text-transform: uppercase; letter-spacing: 0.04em; transition: color 0.2s; } .acc__desc { font-size: 0.875rem; color: var(--muted); } .acc__count { font-size: 0.75rem; font-weight: 700; color: var(--blue-700); background: var(--ice); padding: 0.3rem 0.7rem; border-radius: 99px; white-space: nowrap; } .acc__chev { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2301294e' stroke-width='2' d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform 0.3s var(--ease); } .acc__item[open] .acc__chev { transform: rotate(180deg); border-color: var(--blue-700); } .acc__list { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 0 1.5rem; padding: 0.25rem 1.5rem 1.5rem; border-top: 1px solid var(--line); padding-top: 1rem; } .acc__list a { display: flex; align-items: center; min-height: 40px; color: var(--blue-700); text-decoration: none; font-size: 0.9375rem; } .acc__list a:hover { text-decoration: underline; color: var(--navy); } @media (max-width: 575px) { .acc__desc { display: none; } .acc__sum { padding: 1rem; } } .pg-reactivos .pt-sm { padding-top: clamp(2rem,1.5rem + 2vw,3.5rem); } .pg-reactivos .mb { margin-bottom: 1.5rem; } .pg-reactivos .media { border-radius: var(--radius-lg); background: radial-gradient(65% 60% at 50% 55%,var(--ice) 0%,#fff 100%); padding: clamp(1rem,0.5rem + 2vw,2.5rem); } .pg-reactivos .media img { filter: drop-shadow(0 24px 30px rgb(1 41 78 / 0.18)); } .pg-reactivos .compat { margin-top: 1.75rem; padding: 1.5rem; border-radius: 16px; background: var(--ice); } .pg-reactivos .compat__t { font-weight: 700; color: var(--navy); margin-bottom: 0.75rem; } .pg-reactivos .compat ul { display: flex; flex-wrap: wrap; gap: 0.5rem; } .pg-reactivos .compat li { padding: 0.3rem 0.8rem; border-radius: 99px; background: #fff; border: 1px solid var(--line); font-size: 0.875rem; font-weight: 600; color: var(--navy); } .pg-reactivos .compat__n { margin-top: 0.9rem; font-size: 0.8125rem; color: var(--muted); } .pg-reactivos .jump { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; } .pg-reactivos .jump a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.4rem 1rem; border-radius: 99px; border: 1px solid var(--line); font-size: 0.875rem; font-weight: 600; color: var(--navy); text-decoration: none; } .pg-reactivos .jump a:hover { border-color: var(--blue-700); color: var(--blue-700); } .pg-reactivos .jump span { font-size: 0.75rem; color: var(--blue-700); background: var(--ice); border-radius: 99px; padding: 0.1rem 0.5rem; } /* ---- Página: equipo ---- */ .cf { display: grid; grid-template-columns: 120px 1fr; gap: 1.25rem; align-items: center; } @media (min-width: 576px) { .cf { grid-template-columns: 150px 1fr; } } .cf__img { border-radius: 50%; box-shadow: var(--shadow-1); aspect-ratio: 1; overflow: hidden; background: #fff; } .cf__img--icon { display: grid; place-items: center; background: #fff; color: var(--blue-500); border: 1px solid var(--line); } .cf__img img { width: 100%; height: 100%; object-fit: cover; } .cf__t { font-size: 1.25rem; line-height: 1.2; font-weight: 400; color: #5a5c60; } .cf__d { display: block; color: var(--blue-700); font-weight: 600; } .cf__p { margin-top: 0.4rem; font-size: 0.9375rem; color: var(--muted); } .pg-equipo .mt-sm { margin-top: 0.75rem; } .pg-equipo .mt-md { margin-top: 2rem; } .pg-equipo .note { font-size: 0.8125rem; color: var(--muted); margin-top: 1rem; } .pg-equipo .phero { position: relative; overflow: hidden; color: #d4e1ec; background: radial-gradient(55% 80% at 80% 45%,rgb(147 214 225 / 0.35),transparent 70%),radial-gradient(70% 120% at 100% 0%,rgb(8 143 209 / 0.5),transparent 60%),var(--navy); padding: clamp(2rem,1.5rem + 2vw,3rem) 0 clamp(5rem,4rem + 5vw,8rem); } .pg-equipo .phero__in { position: relative; z-index: 2; display: grid; gap: 2rem; align-items: center; } @media (min-width: 992px) { .pg-equipo .phero__in { grid-template-columns: 1.1fr 0.9fr; } } .pg-equipo .phero .eyebrow { color: var(--aqua-300); margin-top: 1.5rem; } .pg-equipo .phero__lead { margin: 1.25rem 0 1.75rem; font-size: var(--fs-lead); max-width: 38ch; color: #fff; } .pg-equipo .phero__img { position: relative; max-width: 480px; width: 100%; justify-self: center; } .pg-equipo .phero__img::before { content: ""; position: absolute; inset: 8% 0 0; border-radius: 50%; background: radial-gradient(closest-side,rgb(147 214 225 / 0.45),transparent); } .pg-equipo .phero__img img { position: relative; max-height: 520px; filter: drop-shadow(0 30px 40px rgb(0 0 0 / 0.35)); } .phero__sig { margin: 0.25rem 0 0.25rem; } .pg-equipo .crumbs { font-size: 0.8125rem; } .pg-equipo .crumbs ol { display: flex; flex-wrap: wrap; } .pg-equipo .crumbs li+li::before { content: "/"; margin: 0 0.6rem; opacity: 0.5; } .pg-equipo .crumbs a { color: var(--aqua-300); text-decoration: none; } .pg-equipo .chips { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 2.25rem; } .pg-equipo .chips div { padding: 0.8rem 1.1rem; border: 1px solid rgb(255 255 255 / 0.18); border-radius: 12px; background: rgb(255 255 255 / 0.05); min-width: 120px; } .pg-equipo .chips dt { font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--aqua-300); } .pg-equipo .chips dd { font-size: 1.5rem; font-weight: 800; color: #fff; line-height: 1.2; } .pg-equipo .chips small { font-size: 0.75rem; font-weight: 500; color: #c3d2df; } .read-more.on-dark { color: var(--aqua-300); } .pg-equipo .top { align-items: start; } .pg-equipo .feats { --gap: 2.5rem 2rem; margin-top: 1rem; } .pg-equipo .specs { min-width: 560px; } .pg-equipo .specs tbody th { width: 32%; text-align: left; } .pg-equipo .rg__list { display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 0.5rem; } .pg-equipo .rg__list a { display: flex; align-items: center; min-height: 48px; padding: 0.5rem 0.9rem; border: 1px solid rgb(255 255 255 / 0.15); border-radius: 8px; color: #fff; text-decoration: none; font-size: 0.875rem; transition: background 0.2s,border-color 0.2s; } .pg-equipo .rg__list a:hover { background: rgb(255 255 255 / 0.08); border-color: var(--aqua-300); } .pg-equipo .rg__all { color: var(--aqua-300)!important; font-weight: 700; } .pg-equipo .form-grid-page { display: grid; gap: 3rem; } @media (min-width: 992px) { .pg-equipo .form-grid-page { grid-template-columns: 0.8fr 1.2fr; gap: 4rem; align-items: start; } } .pg-equipo .form-card { background: #fff; padding: clamp(1.5rem,1rem + 2vw,2.75rem); border-radius: 4px; box-shadow: var(--shadow-1); } .pg-equipo .others { margin-top: var(--section); } .pg-equipo .cards { --gap: 1.5rem; } .pg-equipo .cards>li { height: 100%; } /* ---- Página: reactivo ---- */ .pg-reactivo .pt-0 { padding-top: 0; } .pg-reactivo .mt-md { margin-top: 2rem; } .pg-reactivo .top { align-items: start; } .pg-reactivo .tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; } .pg-reactivo .tag { padding: 0.35rem 0.85rem; border-radius: 99px; border: 1px solid rgb(255 255 255 / 0.25); font-size: 0.8125rem; color: #fff; } .pg-reactivo .tag--hl { background: var(--blue-500); border-color: var(--blue-500); font-weight: 600; } .pg-reactivo .media { margin: 0; border-radius: var(--radius-lg); background: radial-gradient(65% 60% at 50% 50%,#fff 0%,var(--ice) 100%); padding: clamp(1.25rem,0.5rem + 2vw,2.5rem); } .pg-reactivo .media img { filter: drop-shadow(0 24px 30px rgb(1 41 78 / 0.18)); } .pg-reactivo .media figcaption { margin-top: 0.75rem; text-align: center; font-size: 0.8125rem; color: var(--muted); } .pg-reactivo .sub { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.08em; margin: 2rem 0 1rem; } .pg-reactivo .muted { color: var(--muted)!important; font-style: italic; font-weight: 400!important; } .pg-reactivo .table th { width: 42%; } .pg-reactivo .docs { display: grid; gap: 0.6rem; } .pg-reactivo .docs a { display: flex; align-items: center; gap: 0.75rem; min-height: 56px; padding: 0.75rem 1.1rem; background: #fff; border-radius: 4px; border: 1px solid var(--line); color: var(--navy); font-weight: 600; text-decoration: none; } .pg-reactivo .docs a:hover { border-color: var(--blue-700); color: var(--blue-700); } .pg-reactivo .docs a span { margin-left: auto; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-700); } .pg-reactivo .docs .icon { color: var(--blue-700); flex: none; } .pg-reactivo .note { margin-top: 1rem; font-size: 0.8125rem; color: var(--muted); } .pg-reactivo .form-wrap { display: grid; gap: 3rem; } @media (min-width: 992px) { .pg-reactivo .form-wrap { grid-template-columns: 0.8fr 1.2fr; gap: 4rem; align-items: start; } } .pg-reactivo .form-card { background: #fff; padding: clamp(1.5rem,1rem + 2vw,2.75rem); border-radius: 4px; box-shadow: var(--shadow-1); } .pg-reactivo .rel ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; margin-bottom: 1rem; } .pg-reactivo .rel a { display: flex; align-items: center; min-height: 40px; font-size: 0.9375rem; text-decoration: none; } .pg-reactivo .rel a:hover { text-decoration: underline; }