/* ============================================================================ TREV-ON SOLUCIÓN INDUSTRIAL® — Landing page Hoja de estilos única (sin build, sin framework). Mobile-first. --------------------------------------------------------------------------- CÓMO EDITAR: - Colores y tokens de marca: bloque :root de abajo. - Tipografías: se cargan en (Google Fonts). Ver --font-*. - Cada sección tiene un comentario /* == NOMBRE == * / para ubicarla rápido. ========================================================================== */ /* ============================== TOKENS DE MARCA ========================== */ :root { /* Colores de marca Trev-on (amarillo muestreado del brochure = #FDF000) */ --yellow: #FDF000; /* Amarillo de marca (CTA, acentos, líneas) */ --yellow-hover: #E4D800; /* Amarillo más oscuro para hover de botones */ --black: #0F0F0F; /* Negro / casi negro (texto y fondos) */ --charcoal: #1c1c1c; /* Gris carbón (secciones oscuras) */ --charcoal-2: #242424; /* Tarjetas sobre fondo oscuro */ --charcoal-line: #343434; /* Bordes sobre fondo oscuro */ --white: #ffffff; --gray-50: #f5f5f5; /* Fondos alternos claros */ --gray-100: #ededed; --gray-200: #e2e2e2; /* Bordes claros */ --gray-400: #9a9a9a; --gray-500: #6a6a6a; /* Texto secundario/atenuado */ --ink: #171717; /* Texto principal sobre claro */ /* Tipografías */ --font-display: "Oswald", "Arial Narrow", sans-serif; /* Títulos industriales */ --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Layout */ --maxw: 1200px; --gutter: 20px; --radius: 10px; --radius-sm: 6px; --shadow: 0 6px 24px rgba(0, 0, 0, .10); --shadow-lg: 0 18px 50px rgba(0, 0, 0, .18); --header-h: 68px; --topbar-h: 38px; --ease: cubic-bezier(.2, .7, .2, 1); } /* ============================== RESET / BASE ============================= */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } } body { font-family: var(--font-body); color: var(--ink); background: var(--white); line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } ul { list-style: none; padding: 0; } /* Foco visible accesible */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; } /* Enlace "saltar al contenido" para lectores de pantalla / teclado */ .skip-link { position: absolute; left: -999px; top: 0; z-index: 200; background: var(--yellow); color: var(--black); padding: 10px 16px; font-weight: 700; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; } /* ============================== TIPOGRAFÍA ============================== */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.08; letter-spacing: .3px; } .eyebrow { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 2.5px; font-size: .8rem; color: var(--black); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 28px; height: 3px; background: var(--yellow); display: inline-block; } .eyebrow--light { color: var(--white); } .section-title { font-size: clamp(1.7rem, 4.5vw, 2.6rem); text-transform: uppercase; color: var(--ink); margin-top: 10px; } .section-title--light { color: var(--white); } .section-lead { color: var(--gray-500); max-width: 62ch; margin-top: 14px; font-size: 1.02rem; } .section-lead--light { color: rgba(255, 255, 255, .72); } /* ============================== LAYOUT ================================= */ .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); } .section { padding: 64px 0; } .section--tight { padding: 48px 0; } .section--dark { background: var(--charcoal); color: var(--white); } .section--black { background: var(--black); color: var(--white); } .section--gray { background: var(--gray-50); } .section-head { margin-bottom: 40px; max-width: 760px; } .section-head--center { margin-left: auto; margin-right: auto; text-align: center; } .section-head--center .section-lead { margin-left: auto; margin-right: auto; } .section-head--center .eyebrow { justify-content: center; } /* ============================== BOTONES ================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-display); font-weight: 600; letter-spacing: .5px; text-transform: uppercase; font-size: .95rem; padding: 14px 26px; border: 2px solid transparent; border-radius: var(--radius-sm); transition: transform .15s var(--ease), background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); white-space: nowrap; } .btn svg { width: 20px; height: 20px; flex: none; } .btn--primary { background: var(--yellow); color: var(--black); } .btn--primary:hover { background: var(--yellow-hover); transform: translateY(-2px); } .btn--dark { background: var(--black); color: var(--white); } .btn--dark:hover { background: #000; transform: translateY(-2px); } .btn--ghost { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, .45); } .btn--ghost:hover { border-color: var(--yellow); color: var(--yellow); } .btn--ghost-dark { background: transparent; color: var(--ink); border-color: var(--gray-200); } .btn--ghost-dark:hover { border-color: var(--black); } .btn--block { width: 100%; } .btn--lg { padding: 17px 32px; font-size: 1.02rem; } /* ============================== TOP BAR ================================= */ .topbar { background: var(--black); color: rgba(255, 255, 255, .82); font-size: .82rem; border-bottom: 1px solid #000; } .topbar__inner { display: flex; align-items: center; justify-content: space-between; min-height: var(--topbar-h); gap: 16px; } .topbar__group { display: flex; align-items: center; gap: 20px; } .topbar a { display: inline-flex; align-items: center; gap: 7px; transition: color .15s; } .topbar a:hover { color: var(--yellow); } .topbar svg { width: 15px; height: 15px; color: var(--yellow); flex: none; } .topbar__loc { color: rgba(255, 255, 255, .6); } .topbar .topbar__hide-sm { display: none; } /* ============================== HEADER / NAV ============================ */ .header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .97); backdrop-filter: saturate(150%) blur(6px); border-bottom: 1px solid var(--gray-200); transition: box-shadow .2s var(--ease), background .2s var(--ease); } .header.is-scrolled { box-shadow: var(--shadow); } .header__inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); transition: height .2s var(--ease); } .header.is-scrolled .header__inner { height: 58px; } .brand { display: flex; align-items: center; gap: 12px; } .brand img { height: 46px; width: auto; transition: height .2s var(--ease); } .header.is-scrolled .brand img { height: 40px; } .brand__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .nav { display: none; align-items: center; gap: 6px; } .nav a { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: .6px; font-size: .92rem; color: var(--ink); padding: 10px 12px; border-radius: 6px; position: relative; } .nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform .2s var(--ease); } .nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); } .header__cta { display: none; } /* Botón hamburguesa (móvil) */ .hamburger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 46px; height: 42px; background: var(--black); border: none; border-radius: 8px; padding: 0 11px; } .hamburger span { height: 2px; background: var(--yellow); border-radius: 2px; transition: transform .2s var(--ease), opacity .2s var(--ease); } .hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Menú móvil desplegable */ .mobile-menu { position: fixed; inset: 0 0 0 auto; width: min(84vw, 340px); z-index: 130; background: var(--black); color: var(--white); transform: translateX(100%); transition: transform .28s var(--ease); padding: calc(var(--header-h) + 20px) 26px 30px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; } .mobile-menu.is-open { transform: translateX(0); box-shadow: var(--shadow-lg); } .mobile-menu a { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .8px; font-size: 1.15rem; padding: 14px 4px; border-bottom: 1px solid var(--charcoal-line); } .mobile-menu a:hover { color: var(--yellow); } .mobile-menu .btn { margin-top: 20px; } .mobile-menu__contact { margin-top: auto; padding-top: 24px; font-size: .9rem; color: rgba(255, 255, 255, .7); display: grid; gap: 8px; } .mobile-menu__contact a { border: none; padding: 0; font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: .9rem; } .overlay { position: fixed; inset: 0; z-index: 120; background: rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; transition: opacity .28s, visibility .28s; } .overlay.is-open { opacity: 1; visibility: visible; } /* ============================== HERO =================================== */ .hero { position: relative; background: var(--black); color: var(--white); overflow: hidden; } .hero__bg { position: absolute; inset: 0; z-index: 0; } .hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Overlay oscuro para legibilidad del texto sobre la foto */ .hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 10, 10, .92) 0%, rgba(10, 10, 10, .78) 45%, rgba(10, 10, 10, .45) 100%), linear-gradient(0deg, rgba(10, 10, 10, .8) 0%, rgba(10, 10, 10, .1) 40%); } .hero__inner { position: relative; z-index: 1; padding: 56px 0 48px; max-width: 760px; } .hero h1 { font-size: clamp(2.1rem, 7vw, 4rem); text-transform: uppercase; margin: 18px 0 0; letter-spacing: .5px; } .hero h1 .accent { color: var(--yellow); } .hero__sub { font-size: clamp(1rem, 2.4vw, 1.18rem); color: rgba(255, 255, 255, .86); margin-top: 18px; max-width: 60ch; } .hero__sub strong { color: var(--white); font-weight: 600; } .hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; } .hero__partners { margin-top: 40px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .16); display: flex; align-items: center; gap: 22px 30px; flex-wrap: wrap; } .hero__partners-label { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 1.5px; font-size: .72rem; color: rgba(255, 255, 255, .6); max-width: 92px; line-height: 1.3; } .hero__partners img { height: 26px; width: auto; opacity: .95; } /* ============================== TRUST STRIP ============================ */ .trust { background: var(--charcoal); color: var(--white); border-top: 3px solid var(--yellow); } .trust__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--charcoal-line); } .trust__item { background: var(--charcoal); padding: 24px 18px; text-align: center; } .trust__num { font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; color: var(--yellow); line-height: 1; } .trust__label { font-size: .82rem; color: rgba(255, 255, 255, .78); margin-top: 8px; letter-spacing: .3px; } .trust__iso { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; } .trust__iso img { height: 46px; width: auto; border-radius: 4px; } .trust__iso span { font-size: .74rem; color: rgba(255, 255, 255, .7); } /* ============================== SERVICIOS ============================== */ .services-grid { display: grid; grid-template-columns: 1fr; gap: 22px; } .card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--gray-100); } .card__media { position: relative; aspect-ratio: 16 / 10; background: var(--gray-100); overflow: hidden; } .card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .card:hover .card__media img { transform: scale(1.05); } .card__icon { position: absolute; left: 14px; bottom: -22px; width: 48px; height: 48px; background: var(--yellow); border-radius: 10px; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); } .card__icon svg { width: 26px; height: 26px; color: var(--black); } .card__body { padding: 30px 22px 22px; display: flex; flex-direction: column; flex: 1; } .card__title { font-size: 1.2rem; text-transform: uppercase; color: var(--ink); } .card__desc { color: var(--gray-500); font-size: .95rem; margin-top: 8px; flex: 1; } .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; } .tag { font-family: var(--font-display); font-size: .72rem; text-transform: uppercase; letter-spacing: .6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--gray-200); color: var(--gray-500); background: var(--gray-50); } .tag--on { background: var(--black); color: var(--yellow); border-color: var(--black); } .card__link { margin-top: 18px; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: .6px; font-size: .88rem; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; } .card__link svg { width: 16px; height: 16px; transition: transform .18s var(--ease); } .card__link:hover { color: #000; } .card__link:hover svg { transform: translateX(4px); } .card__link .u { border-bottom: 2px solid var(--yellow); padding-bottom: 2px; } /* ============================== ¿POR QUÉ TREV-ON? ===================== */ .why-grid { display: grid; grid-template-columns: 1fr; gap: 2px; background: var(--charcoal-line); border: 1px solid var(--charcoal-line); border-radius: var(--radius); overflow: hidden; } .why-item { background: var(--charcoal); padding: 28px 24px; } .why-item__ico { width: 46px; height: 46px; border-radius: 10px; background: rgba(253, 240, 0, .12); display: grid; place-items: center; margin-bottom: 16px; } .why-item__ico svg { width: 26px; height: 26px; color: var(--yellow); } .why-item h3 { font-size: 1.15rem; text-transform: uppercase; color: var(--white); } .why-item p { color: rgba(255, 255, 255, .72); font-size: .95rem; margin-top: 8px; } /* ============================== SECTORES ============================== */ .sectors { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .sector { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 28px 18px; text-align: center; transition: transform .2s var(--ease), border-color .2s; } .sector:hover { transform: translateY(-4px); border-color: var(--black); } .sector__ico { width: 60px; height: 60px; margin: 0 auto 14px; border-radius: 14px; background: var(--black); display: grid; place-items: center; } .sector__ico svg { width: 32px; height: 32px; color: var(--yellow); } .sector h3 { font-size: 1.05rem; text-transform: uppercase; color: var(--ink); } /* ============================== CASO DE ÉXITO ========================= */ .cases { display: grid; grid-template-columns: 1fr; gap: 24px; } .case { display: grid; grid-template-columns: 1fr; background: var(--charcoal-2); border: 1px solid var(--charcoal-line); border-radius: var(--radius); overflow: hidden; } .case__media { aspect-ratio: 4 / 3; } .case__media img { width: 100%; height: 100%; object-fit: cover; } .case__body { padding: 28px 24px; display: flex; flex-direction: column; } .case__tag { align-self: flex-start; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 1px; font-size: .72rem; color: var(--black); background: var(--yellow); padding: 5px 12px; border-radius: 4px; margin-bottom: 16px; } .case__body h3 { font-size: 1.35rem; text-transform: uppercase; color: var(--white); } .case__meta { color: var(--yellow); font-size: .9rem; margin-top: 6px; font-weight: 500; } .case__result { color: rgba(255, 255, 255, .78); margin-top: 14px; } .case__note { color: var(--gray-400); font-size: .8rem; margin-top: 20px; font-style: italic; } .case--placeholder { border-style: dashed; opacity: .8; align-items: center; justify-content: center; text-align: center; padding: 40px 24px; color: rgba(255, 255, 255, .6); } /* ============================== COBERTURA ============================= */ .coverage { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: center; } .cities { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .city { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--white); border: 1px solid var(--gray-200); border-radius: 999px; font-weight: 500; font-size: .92rem; } .city svg { width: 16px; height: 16px; color: var(--yellow); flex: none; } .city--all { background: var(--black); color: var(--white); border-color: var(--black); } .city--all svg { color: var(--yellow); } .coverage__aside { background: var(--black); color: var(--white); border-radius: var(--radius); padding: 30px; border-left: 4px solid var(--yellow); } .coverage__aside h3 { font-size: 1.3rem; text-transform: uppercase; } .coverage__aside p { color: rgba(255, 255, 255, .75); margin-top: 12px; } /* ============================== MODELO V/R/S ========================= */ .model { display: grid; grid-template-columns: 1fr; gap: 18px; } .model-col { background: var(--white); border: 1px solid var(--gray-200); border-top: 4px solid var(--yellow); border-radius: var(--radius); padding: 30px 26px; } .model-col__n { font-family: var(--font-display); font-weight: 700; color: var(--gray-200); font-size: 2.4rem; line-height: 1; } .model-col h3 { font-size: 1.35rem; text-transform: uppercase; margin-top: 6px; } .model-col p { color: var(--gray-500); margin-top: 12px; } /* ============================== CONTACTO / FORM ====================== */ .contact { display: grid; grid-template-columns: 1fr; gap: 34px; } .contact__intro h2 { font-size: clamp(1.8rem, 5vw, 2.7rem); text-transform: uppercase; } .contact__list { margin-top: 26px; display: grid; gap: 18px; } .contact__row { display: flex; gap: 14px; align-items: flex-start; } .contact__row .ico { width: 42px; height: 42px; border-radius: 10px; background: rgba(253, 240, 0, .14); display: grid; place-items: center; flex: none; } .contact__row .ico svg { width: 22px; height: 22px; color: var(--yellow); } .contact__row .lbl { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .8px; font-size: .78rem; color: rgba(255, 255, 255, .55); } .contact__row .val { color: var(--white); font-size: 1rem; } .contact__row .val a:hover { color: var(--yellow); } .contact__wa { margin-top: 28px; } .form { background: var(--white); color: var(--ink); border-radius: var(--radius); padding: 28px 24px; box-shadow: var(--shadow-lg); } .form h3 { font-size: 1.35rem; text-transform: uppercase; } .form p.form__hint { color: var(--gray-500); font-size: .9rem; margin-top: 6px; margin-bottom: 20px; } .field { margin-bottom: 16px; } .field label { display: block; font-weight: 600; font-size: .86rem; margin-bottom: 6px; } .field label .req { color: #c0392b; } .field input, .field select, .field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); font-family: inherit; font-size: .98rem; background: var(--gray-50); color: var(--ink); transition: border-color .15s, background .15s; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--black); background: var(--white); outline: none; } .field textarea { resize: vertical; min-height: 110px; } .field--row { display: grid; grid-template-columns: 1fr; gap: 0; } .form__row { display: grid; grid-template-columns: 1fr; gap: 0 16px; } .form__status { margin-top: 12px; font-size: .9rem; padding: 12px 14px; border-radius: var(--radius-sm); display: none; } .form__status.is-ok { display: block; background: #e8f8ee; color: #1c7a44; border: 1px solid #bfe6cd; } .form__status.is-err { display: block; background: #fdecea; color: #b23c2e; border: 1px solid #f5c6bf; } .form__legal { font-size: .78rem; color: var(--gray-400); margin-top: 14px; } /* ============================== FOOTER =============================== */ .footer { background: var(--black); color: rgba(255, 255, 255, .72); padding: 56px 0 24px; } .footer__grid { display: grid; grid-template-columns: 1fr; gap: 34px; } .footer__brand img { height: 66px; width: auto; margin-bottom: 16px; } .footer__brand p { font-size: .9rem; max-width: 40ch; } .footer h4 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 1px; color: var(--white); font-size: .95rem; margin-bottom: 16px; } .footer ul { display: grid; gap: 10px; font-size: .92rem; } .footer a:hover { color: var(--yellow); } .footer__nap { display: grid; gap: 12px; font-size: .92rem; } .footer__nap .row { display: flex; gap: 10px; align-items: flex-start; } .footer__nap svg { width: 17px; height: 17px; color: var(--yellow); flex: none; margin-top: 3px; } .footer__iso { display: flex; align-items: center; gap: 12px; margin-top: 6px; } .footer__iso img { height: 42px; border-radius: 4px; } .footer__iso span { font-size: .8rem; } .footer__social a { display: inline-flex; align-items: center; gap: 8px; } .footer__social svg { width: 20px; height: 20px; color: var(--yellow); } .footer__bottom { border-top: 1px solid var(--charcoal-line); margin-top: 40px; padding-top: 22px; display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; font-size: .82rem; color: var(--gray-400); } .footer__bottom a:hover { color: var(--yellow); } /* ============================== WHATSAPP FLOTANTE ==================== */ .wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 90; width: 58px; height: 58px; border-radius: 50%; background: #25D366; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); transition: transform .2s var(--ease); animation: wa-pulse 2.4s infinite; } .wa-float:hover { transform: scale(1.08); } .wa-float svg { width: 32px; height: 32px; color: #fff; } @keyframes wa-pulse { 0% { box-shadow: 0 8px 24px rgba(0, 0, 0, .3), 0 0 0 0 rgba(37, 211, 102, .5); } 70% { box-shadow: 0 8px 24px rgba(0, 0, 0, .3), 0 0 0 16px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 8px 24px rgba(0, 0, 0, .3), 0 0 0 0 rgba(37, 211, 102, 0); } } /* ============================== ANIMACIONES REVEAL =================== */ /* Elementos con [data-reveal] entran con fade + slide-up al hacer scroll */ [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); } [data-reveal].is-visible { opacity: 1; transform: none; } [data-reveal-delay="1"] { transition-delay: .08s; } [data-reveal-delay="2"] { transition-delay: .16s; } [data-reveal-delay="3"] { transition-delay: .24s; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } } /* ============================== RESPONSIVE =========================== */ @media (min-width: 560px) { .trust__grid { grid-template-columns: repeat(4, 1fr); } .sectors { grid-template-columns: repeat(4, 1fr); } .form__row { grid-template-columns: 1fr 1fr; } .topbar .topbar__hide-sm { display: inline-flex; } } @media (min-width: 768px) { .section { padding: 84px 0; } .services-grid { grid-template-columns: repeat(2, 1fr); } .why-grid { grid-template-columns: repeat(2, 1fr); } .model { grid-template-columns: repeat(3, 1fr); } .case { grid-template-columns: 1fr 1.2fr; } .case__media { aspect-ratio: auto; } .cases { grid-template-columns: 1fr; } .coverage { grid-template-columns: 1.4fr 1fr; } .contact { grid-template-columns: 1fr 1fr; } .hero__inner { padding: 88px 0 72px; } } @media (min-width: 992px) { .nav { display: flex; } .header__cta { display: inline-flex; } .hamburger { display: none; } .services-grid { grid-template-columns: repeat(3, 1fr); } .why-grid { grid-template-columns: repeat(3, 1fr); } .footer__grid { grid-template-columns: 1.4fr 1fr 1.3fr; } .cases { grid-template-columns: 1fr; } }