:root {
        --sgc-red: #ed1c24;
        --sgc-red-dark: #cf1018;
        --sgc-blue: #09243e;
        --sgc-blue-2: #0c2f50;
        --sgc-text: #102942;
        --sgc-muted: #647386;
        --sgc-line: #e3e9ef;
        --sgc-soft: #f5f8fb;
        --sgc-white: #fff;
        --max: 1320px;
      }

      * { box-sizing: border-box; }

      html { scroll-behavior: smooth; }

      body {
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
        color: var(--sgc-text);
        background: #fff;
      }

      a { color: inherit; text-decoration: none; }

      button, input, select { font: inherit; }

      button { cursor: pointer; }

      .container {
        width: min(var(--max), calc(100% - 56px));
        margin: 0 auto;
      }

      /* =========================
         HEADER
         ========================= */

      .site-header {
        position: sticky;
        top: 0;
        z-index: 50;
        background: rgba(255,255,255,.97);
        border-bottom: 1px solid #edf0f3;
        backdrop-filter: blur(12px);
      }

      .header-inner {
        min-height: 78px;
        display: flex;
        align-items: center;
        gap: 28px;
      }

      .brand {
        display: inline-flex;
        align-items: center;
        min-width: 205px;
        gap: 9px;
      }

      .brand-check {
        width: 49px;
        height: 49px;
        flex: 0 0 49px;
        border-radius: 50%;
        background: var(--sgc-red);
        display: grid;
        place-items: center;
        box-shadow: 0 4px 12px rgba(237,28,36,.18);
      }

      .brand-check svg { width: 29px; height: 29px; }

      .brand-copy {
        line-height: .9;
      }

      .brand-copy strong {
        display: block;
        color: var(--sgc-blue);
        font-size: 25px;
        font-weight: 900;
        letter-spacing: -1.4px;
      }

      .brand-copy b {
        display: block;
        color: var(--sgc-red);
        font-size: 14px;
        font-weight: 900;
        letter-spacing: .2px;
      }

      .brand-copy small {
        display: block;
        margin-top: 2px;
        color: var(--sgc-blue);
        font-size: 9px;
        font-weight: 700;
        white-space: nowrap;
      }

      .main-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 25px;
        flex: 1;
      }

      .main-nav a {
        position: relative;
        padding: 29px 0 27px;
        color: #11263c;
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
        white-space: nowrap;
      }

      .main-nav a:hover,
      .main-nav a.active { color: var(--sgc-red); }

      .main-nav a.active::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 20px;
        height: 3px;
        border-radius: 4px;
        background: var(--sgc-red);
      }

      .company-access {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 12px 18px;
        border-radius: 5px;
        background: var(--sgc-red);
        color: #fff;
        box-shadow: 0 4px 10px rgba(237,28,36,.18);
        min-width: 190px;
      }

      .company-access svg { width: 20px; height: 20px; flex: 0 0 20px; }

      .company-access strong {
        display: block;
        font-size: 13px;
        line-height: 1.1;
        text-transform: uppercase;
      }

      .company-access small {
        display: block;
        margin-top: 3px;
        font-size: 8px;
        font-weight: 600;
        opacity: .95;
      }

      /* =========================
         HERO
         ========================= */

      .hero {
        position: relative;
        min-height: 420px;
        overflow: hidden;
        background:
          linear-gradient(90deg, #f7fafc 0%, #f7fafc 43%, rgba(247,250,252,.9) 53%, rgba(255,255,255,0) 78%),
          #f7fafc;
      }

      .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(115deg, rgba(255,255,255,.88) 0 38%, transparent 58%),
          radial-gradient(circle at 22% 50%, rgba(255,255,255,.95), transparent 42%);
        pointer-events: none;
      }

      .hero-scene {
        position: absolute;
        right: 0;
        top: 0;
        width: 58%;
        height: 100%;
        overflow: hidden;
        background:
          linear-gradient(145deg, rgba(13,40,62,.15), rgba(255,255,255,.1)),
          linear-gradient(0deg, rgba(10,35,55,.08), rgba(255,255,255,.12));
      }

      .hero-scene img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .hero-scene::before { display: none; }

      .hero-building {
        position: absolute;
        left: 7%;
        bottom: 20px;
        width: 44%;
        height: 55%;
        border-radius: 6px 6px 0 0;
        background:
          repeating-linear-gradient(90deg, rgba(9,36,62,.13) 0 4px, transparent 4px 32px),
          repeating-linear-gradient(0deg, rgba(9,36,62,.1) 0 4px, rgba(255,255,255,.2) 4px 29px),
          linear-gradient(90deg, #dbe4ea, #f8fafc);
        transform: skewY(-4deg);
        opacity: .7;
      }

      .hero-desk {
        position: absolute;
        right: 12%;
        bottom: 32px;
        width: 48%;
        height: 45%;
        border-radius: 20px 20px 4px 4px;
        background: linear-gradient(145deg, #fdfdfd, #cbd3da);
        box-shadow: 0 18px 30px rgba(0,0,0,.12);
        transform: perspective(700px) rotateY(-10deg);
      }

      .hero-laptop {
        position: absolute;
        right: 22%;
        bottom: 106px;
        width: 43%;
        height: 39%;
        border: 8px solid #263b4d;
        border-bottom-width: 14px;
        border-radius: 8px;
        background:
          linear-gradient(145deg, rgba(237,28,36,.96) 0 7%, #102942 7% 100%);
        box-shadow: 0 16px 28px rgba(0,0,0,.2);
        transform: perspective(700px) rotateY(-12deg);
      }

      .hero-laptop::after {
        content: "SGC";
        position: absolute;
        left: 12%;
        top: 25%;
        color: #fff;
        font-size: clamp(18px, 2.2vw, 35px);
        font-weight: 900;
      }

      .hero-cup {
        position: absolute;
        left: 47%;
        bottom: 48px;
        width: 58px;
        height: 65px;
        border-radius: 0 0 18px 18px;
        background: #fff;
        box-shadow: 0 8px 16px rgba(0,0,0,.14);
        transform: rotate(-5deg);
      }

      .hero-cup::after {
        content: "✓ SGC";
        position: absolute;
        top: 25px;
        left: 7px;
        color: var(--sgc-red);
        font-size: 9px;
        font-weight: 900;
      }

      .hero-side {
        display: none !important;
        position: absolute;
        right: 0;
        top: 0;
        width: 26%;
        height: 100%;
        min-width: 285px;
        padding: 48px 48px 30px 68px;
        color: #fff;
        background: linear-gradient(125deg, #0a2239, #082038);
        clip-path: polygon(22% 0,100% 0,100% 100%,0 100%);
      }

      .hero-side-list {
        display: grid;
        gap: 25px;
        margin-top: 6px;
      }

      .hero-side-item {
        display: grid;
        grid-template-columns: 40px 1fr;
        align-items: center;
        gap: 12px;
      }

      .hero-side-item svg {
        width: 36px;
        height: 36px;
        stroke: #fff;
        fill: none;
        stroke-width: 1.8;
      }

      .hero-side-item span {
        font-size: 13px;
        line-height: 1.3;
      }

      .hero-slogan {
        margin: 28px 0 0;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 27px;
        line-height: 1;
        font-style: italic;
        transform: rotate(-4deg);
      }

      .hero-slogan::after {
        content: "";
        display: block;
        width: 90px;
        height: 5px;
        margin: 10px 0 0 58px;
        background: var(--sgc-red);
        transform: rotate(-4deg);
        border-radius: 100%;
      }

      .hero-content {
        position: relative;
        z-index: 4;
        width: min(650px, 50%);
        padding: 29px 0 23px;
      }

      .eyebrow {
        color: var(--sgc-red);
        font-size: 12px;
        font-weight: 900;
        text-transform: uppercase;
        margin-bottom: 5px;
      }

      .hero h1 {
        margin: 0;
        color: var(--sgc-blue);
        font-size: clamp(42px, 4.2vw, 58px);
        line-height: .93;
        letter-spacing: -2.6px;
        font-weight: 900;
      }

      .hero h1 .red { color: var(--sgc-red); }

      .hero-description {
        max-width: 500px;
        margin: 8px 0 12px;
        color: #243c55;
        font-size: 15px;
        line-height: 1.28;
      }

      .search-tabs {
        display: flex;
        gap: 10px;
        margin-bottom: 9px;
      }

      .search-tab {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 16px;
        border: 1px solid var(--sgc-red);
        border-radius: 5px;
        background: var(--sgc-red);
        color: #fff;
        font-size: 12px;
        font-weight: 800;
      }

      .search-tab.secondary {
        background: #fff;
        color: var(--sgc-blue);
      }

      .search-tab svg { width: 18px; height: 18px; }

      .search-bar {
        display: grid;
        grid-template-columns: 1fr 156px;
        gap: 4px;
        max-width: 530px;
      }

      .category-select-wrap {
        position: relative;
      }

      .category-select {
        width: 100%;
        height: 40px;
        appearance: none;
        padding: 0 38px 0 38px;
        border: 1px solid #cfd8e1;
        border-radius: 5px;
        background: #fff;
        color: #596a7d;
        font-size: 12px;
        outline: none;
        box-shadow: 0 3px 9px rgba(10,35,55,.08);
      }

      .category-select-wrap .list-icon {
        position: absolute;
        left: 12px;
        top: 11px;
        width: 16px;
        height: 16px;
        color: #203a55;
        pointer-events: none;
      }

      .company-input {
        appearance: none;
        padding-left: 38px;
        padding-right: 12px;
      }

      .category-select-wrap[hidden] {
        display: none;
      }

      .category-select-wrap .chevron {
        position: absolute;
        right: 12px;
        top: 12px;
        width: 14px;
        height: 14px;
        color: #203a55;
        pointer-events: none;
      }

      .search-main-button {
        height: 40px;
        border: 0;
        border-radius: 5px;
        background: var(--sgc-red);
        color: #fff;
        font-size: 12px;
        font-weight: 900;
        box-shadow: 0 4px 10px rgba(237,28,36,.2);
      }

      .search-main-button:hover,
      .company-access:hover { background: var(--sgc-red-dark); }

      /* =========================
         SECTIONS
         ========================= */

      .section {
        padding: 20px 0 18px;
      }

      .section-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        margin-bottom: 11px;
      }

      .title-wrap {
        position: relative;
        padding-left: 15px;
      }

      .title-wrap::before {
        content: "";
        position: absolute;
        left: 0;
        top: 1px;
        bottom: 1px;
        width: 5px;
        border-radius: 2px;
        background: var(--sgc-red);
      }

      .section-title h2 {
        margin: 0;
        color: var(--sgc-blue);
        font-size: 21px;
        line-height: 1.05;
        font-weight: 900;
      }

      .section-title p {
        margin: 3px 0 0;
        color: #69798b;
        font-size: 11px;
      }

      .section-link {
        color: var(--sgc-red);
        font-size: 11px;
        font-weight: 900;
        white-space: nowrap;
      }

      /* =========================
         CATEGORIES
         ========================= */

      .category-grid {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        gap: 7px;
      }

      .category-card {
        min-height: 88px;
        padding: 9px 5px 7px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        border: 1px solid #e2e8ee;
        border-radius: 6px;
        background: #fff;
        box-shadow: 0 2px 6px rgba(13,38,61,.05);
        color: var(--sgc-text);
        text-align: center;
        transition: .18s ease;
      }

      .category-card:hover {
        transform: translateY(-2px);
        border-color: rgba(237,28,36,.45);
        box-shadow: 0 7px 15px rgba(13,38,61,.08);
      }

      .category-icon {
        width: 29px;
        height: 29px;
        color: var(--sgc-red);
      }

      .category-icon img {
        display: block;
        width: 100%;
        height: 100%;
      }

      .category-name {
        max-width: 92px;
        font-size: 9px;
        line-height: 1.05;
        font-weight: 700;
      }

      /* =========================
         COMPANY CARDS
         ========================= */

      .company-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 10px;
      }

      .company-card {
        overflow: hidden;
        border: 1px solid #dfe6ed;
        border-radius: 6px;
        background: #fff;
        box-shadow: 0 3px 10px rgba(10,35,55,.07);
      }

      .company-photo {
        position: relative;
        height: 105px;
        overflow: hidden;
      }

      .company-photo::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(125deg, rgba(9,36,62,.72), transparent 45%),
          linear-gradient(0deg, rgba(9,36,62,.28), transparent 55%);
      }

      .company-photo::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 44%;
        background: linear-gradient(transparent, rgba(0,0,0,.25));
      }

      .photo-construction { background: linear-gradient(135deg,#a9b7c1 0 25%,#d7dde1 25% 45%,#8e9ba5 45% 65%,#e9edef 65%); }
      .photo-pool { background: linear-gradient(155deg,#6bc2e5,#1470b5 45%,#0a4e83); }
      .photo-door { background: linear-gradient(135deg,#dfe5e8 0 45%,#e21b23 45% 68%,#242e37 68%); }
      .photo-food { background: radial-gradient(circle at 45% 45%,#d08a39 0 22%,#9a4e20 23% 42%,#542516 43% 100%); }
      .photo-textile { background: linear-gradient(135deg,#e9efe5,#6a9b6c 50%,#214e38); }
      .photo-generic { background: linear-gradient(135deg,#cdd8df,#667c8e 50%,#20384f); }

      .company-logo {
        position: absolute;
        z-index: 3;
        left: 50%;
        bottom: -16px;
        transform: translateX(-50%);
        min-width: 108px;
        padding: 8px 12px;
        border-radius: 7px;
        background: #fff;
        box-shadow: 0 3px 9px rgba(0,0,0,.14);
        color: var(--sgc-blue);
        font-size: 13px;
        font-weight: 900;
        text-align: center;
        white-space: nowrap;
      }

      .company-body {
        padding: 23px 11px 10px;
      }

      .company-body h3 {
        margin: 0 0 3px;
        color: var(--sgc-blue);
        font-size: 12px;
        line-height: 1.12;
      }

      .company-rubro {
        color: #68798c;
        font-size: 9px;
      }

      .company-location {
        margin-top: 7px;
        color: #526579;
        font-size: 9px;
      }

      .company-location::before {
        content: "●";
        margin-right: 4px;
        color: var(--sgc-red);
      }

      .company-button {
        width: 100%;
        margin-top: 8px;
        padding: 7px 5px;
        border: 0;
        border-radius: 4px;
        background: var(--sgc-red);
        color: #fff;
        font-size: 10px;
        font-weight: 900;
      }

      /* =========================
         CONTENT GRID
         ========================= */

      .content-columns {
        display: grid;
        grid-template-columns: 1.18fr .92fr;
        gap: 30px;
      }

      .article-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 9px;
      }

      .article-card {
        overflow: hidden;
        border: 1px solid #e0e7ed;
        border-radius: 5px;
        background: #fff;
        box-shadow: 0 2px 7px rgba(10,35,55,.05);
      }

      .article-image {
        height: 92px;
        background: linear-gradient(135deg,#d5dde2,#8d9ba4 50%,#21384b);
      }

      .article-image.food { background: radial-gradient(circle at 50% 50%,#db9b49 0 20%,#a35c22 21% 44%,#4a2414 45%); }
      .article-image.pool { background: linear-gradient(155deg,#72d0ed,#1876b8 48%,#0c4f84); }

      .article-body { padding: 9px; }

      .article-date {
        color: #738397;
        font-size: 8px;
      }

      .article-card h3 {
        margin: 5px 0;
        color: var(--sgc-blue);
        font-size: 11px;
        line-height: 1.15;
      }

      .article-card p {
        margin: 0;
        color: #617185;
        font-size: 9px;
        line-height: 1.35;
      }

      .read-more {
        display: inline-block;
        margin-top: 7px;
        color: var(--sgc-red);
        font-size: 9px;
        font-weight: 900;
      }

      .media-grid {
        display: grid;
        grid-template-columns: 1.45fr .85fr;
        gap: 9px;
      }

      .video-card,
      .media-small {
        position: relative;
        overflow: hidden;
        border-radius: 5px;
        background: #17344f;
      }

      .video-card { min-height: 204px; }

      .video-image {
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg,#dbe2e6,#75828b 48%,#233949);
      }

      .video-play {
        position: absolute;
        z-index: 2;
        left: 50%;
        top: 50%;
        width: 54px;
        height: 54px;
        transform: translate(-50%,-50%);
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,.75);
        background: rgba(0,0,0,.35);
        display: grid;
        place-items: center;
        color: #fff;
      }

      .video-play::after {
        content: "";
        margin-left: 4px;
        border-top: 9px solid transparent;
        border-bottom: 9px solid transparent;
        border-left: 13px solid #fff;
      }

      .video-title {
        position: absolute;
        z-index: 2;
        left: 12px;
        bottom: 10px;
        color: #fff;
        font-size: 11px;
        font-weight: 800;
      }

      .media-stack {
        display: grid;
        gap: 9px;
      }

      .media-small { min-height: 97px; }

      .media-small.pool { background: linear-gradient(155deg,#6ec7e8,#126caf 48%,#073e6a); }
      .media-small.food { background: radial-gradient(circle at 45% 45%,#da9944 0 22%,#a55b22 23% 48%,#4a2314 49%); }

      .media-small span {
        position: absolute;
        left: 10px;
        bottom: 9px;
        color: #fff;
        font-size: 9px;
        font-weight: 800;
      }

      /* =========================
         HOW IT WORKS
         ========================= */

      .how-section {
        padding: 18px 0 24px;
      }

      .how-box {
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap: 0;
        align-items: start;
      }

      .how-step {
        position: relative;
        padding: 8px 30px 4px 58px;
        min-height: 118px;
      }

      .how-step:not(:last-child)::after {
        content: "→";
        position: absolute;
        right: -7px;
        top: 42px;
        color: var(--sgc-blue);
        font-size: 24px;
        font-weight: 300;
      }

      .how-number {
        position: absolute;
        left: 4px;
        top: 0;
        width: 31px;
        height: 31px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: var(--sgc-red);
        color: #fff;
        font-size: 13px;
        font-weight: 900;
      }

      .how-icon {
        width: 38px;
        height: 38px;
        color: var(--sgc-red);
        margin-bottom: 6px;
      }

      .how-icon svg {
        width: 100%;
        height: 100%;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      .how-step h3 {
        margin: 0 0 4px;
        color: var(--sgc-blue);
        font-size: 12px;
      }

      .how-step p {
        margin: 0;
        color: #65758a;
        font-size: 9px;
        line-height: 1.25;
      }

      .how-step ul {
        margin: 4px 0 0;
        padding-left: 13px;
        color: #65758a;
        font-size: 8px;
        line-height: 1.25;
      }

      .no-register {
        margin-top: 4px;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 13px;
        border-radius: 5px;
        background: #f0f4f8;
        color: var(--sgc-blue);
      }

      .no-register-mark {
        width: 32px;
        height: 32px;
        border: 2px solid var(--sgc-red);
        border-radius: 50%;
        display: grid;
        place-items: center;
        color: var(--sgc-red);
        font-size: 16px;
        font-weight: 900;
      }

      .no-register strong {
        display: block;
        color: var(--sgc-red);
        font-size: 10px;
      }

      .no-register span {
        display: block;
        margin-top: 2px;
        color: #5f6f80;
        font-size: 8px;
      }

      /* =========================
         FOOTER
         ========================= */

      .site-footer {
        background: var(--sgc-blue);
        color: #fff;
      }

      .footer-main {
        display: grid;
        grid-template-columns: 1.15fr .8fr .95fr 1fr 1fr;
        gap: 20px;
        padding: 27px 0 22px;
      }

      .footer-brand .brand-check {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
      }

      .footer-brand .brand-copy strong,
      .footer-brand .brand-copy b,
      .footer-brand .brand-copy small { color: #fff; }

      .footer-brand .brand-copy b { color: #fff; }

      .footer-description {
        margin: 8px 0 0;
        color: #d9e1e8;
        font-size: 10px;
        line-height: 1.35;
      }

      .footer-column {
        border-left: 1px solid rgba(255,255,255,.2);
        padding-left: 18px;
      }

      .footer-column h3 {
        margin: 0 0 8px;
        color: #fff;
        font-size: 11px;
      }

      .footer-column a,
      .footer-column p {
        display: block;
        margin: 4px 0;
        color: #d1dae2;
        font-size: 9px;
        line-height: 1.25;
      }

      .footer-slogan {
        align-self: center;
        font-family: Georgia, "Times New Roman", serif;
        color: #fff;
        font-size: 22px;
        line-height: 1;
        font-style: italic;
        transform: rotate(-4deg);
      }

      .footer-slogan::after {
        content: "";
        display: block;
        width: 76px;
        height: 4px;
        margin: 8px 0 0 45px;
        background: var(--sgc-red);
        transform: rotate(-3deg);
      }

      .footer-bottom {
        border-top: 1px solid rgba(255,255,255,.18);
        padding: 8px 0 9px;
        display: flex;
        justify-content: space-between;
        color: #d2dae1;
        font-size: 8px;
      }

      /* =========================
         RESULTS (functional)
         ========================= */

      .results-section {
        display: none;
        padding: 28px 0;
        background: #f7f9fb;
        border-bottom: 1px solid var(--sgc-line);
      }

      .results-heading {
        display: flex;
        justify-content: space-between;
        align-items: end;
        margin-bottom: 15px;
      }

      .results-heading h2 {
        margin: 0;
        color: var(--sgc-blue);
        font-size: 25px;
      }

      .results-count {
        color: #66778a;
        font-size: 11px;
      }

      .results-grid {
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap: 12px;
      }

      .result-card {
        display: block;
        padding: 16px;
        border: 1px solid #e0e6ec;
        border-radius: 6px;
        background: #fff;
        transition: .18s ease;
      }

      .result-card:hover {
        transform: translateY(-2px);
        border-color: rgba(237,28,36,.45);
        box-shadow: 0 8px 20px rgba(10,35,55,.08);
      }

      .result-card h3 {
        margin: 12px 0 5px;
        color: var(--sgc-blue);
        font-size: 15px;
      }

      .result-category {
        color: var(--sgc-red);
        font-size: 9px;
        font-weight: 900;
        text-transform: uppercase;
      }

      .result-subcategory,
      .result-description {
        color: #637489;
        font-size: 10px;
        line-height: 1.35;
      }

      .result-description { min-height: 40px; }

      .result-bottom {
        display: flex;
        justify-content: space-between;
        padding-top: 8px;
        margin-top: 8px;
        border-top: 1px solid #edf0f3;
        color: #66778a;
        font-size: 9px;
      }

      .result-status {
        float: right;
        color: #368249;
        font-size: 8px;
        font-weight: 900;
      }

      .no-results {
        padding: 20px;
        border: 1px solid var(--sgc-line);
        background: #fff;
        border-radius: 6px;
      }

      .no-results[hidden] { display: none !important; }

      /* =========================
         RESPONSIVE
         ========================= */

      @media (max-width: 1180px) {
        .main-nav { gap: 14px; }
        .main-nav a { font-size: 10px; }
        .brand { min-width: 190px; }
        .company-access { min-width: 165px; }
        .category-grid { grid-template-columns: repeat(5,1fr); }
        .hero-scene { right: 0; width: 58%; }
      }

      @media (max-width: 900px) {
        .container { width: min(100% - 36px, var(--max)); }
        .header-inner { min-height: 68px; }
        .main-nav { display: none; }
        .company-access { margin-left: auto; }
        .hero { min-height: 650px; }
        .hero-content { width: 65%; }
        .hero-scene { right: 0; width: 58%; opacity: 1; }
        .category-grid { grid-template-columns: repeat(4,1fr); }
        .company-grid { grid-template-columns: repeat(3,1fr); }
        .content-columns { grid-template-columns: 1fr; }
        .how-box { grid-template-columns: repeat(2,1fr); }
        .how-step:nth-child(2)::after { display: none; }
        .footer-main { grid-template-columns: repeat(2,1fr); }
        .footer-slogan { display: none; }
        .results-grid { grid-template-columns: repeat(2,1fr); }
      }

      @media (max-width: 620px) {
        .container { width: calc(100% - 28px); }
        .brand { min-width: 0; }
        .brand-copy strong { font-size: 20px; }
        .brand-copy b { font-size: 11px; }
        .brand-copy small { font-size: 7px; }
        .brand-check { width: 41px; height: 41px; flex-basis: 41px; }
        .brand-check svg { width: 24px; height: 24px; }
        .company-access { padding: 9px 11px; min-width: 0; }
        .company-access small { display: none; }
        .hero { min-height: 720px; }
        .hero-content { width: 100%; padding-top: 38px; }
        .hero-scene { right: 0; top: 330px; width: 100%; height: 250px; opacity: .32; }
        .hero-side-list { grid-template-columns: repeat(3,1fr); gap: 8px; margin: 0; }
        .hero-side-item { grid-template-columns: 1fr; text-align: center; gap: 4px; }
        .hero-side-item svg { margin: auto; width: 24px; height: 24px; }
        .hero-side-item span { font-size: 8px; }
        .hero-slogan { display: none; }
        .hero h1 { font-size: 42px; letter-spacing: -2px; }
        .hero-description { font-size: 13px; max-width: 90%; }
        .search-bar { grid-template-columns: 1fr; }
        .search-tabs { flex-wrap: wrap; }
        .category-grid { grid-template-columns: repeat(2,1fr); }
        .company-grid { grid-template-columns: 1fr 1fr; }
        .article-grid { grid-template-columns: 1fr; }
        .media-grid { grid-template-columns: 1fr; }
        .video-card { min-height: 180px; }
        .how-box { grid-template-columns: 1fr; }
        .how-step { min-height: 95px; padding-left: 52px; }
        .how-step::after { display: none !important; }
        .footer-main { grid-template-columns: 1fr; }
        .footer-column { border-left: 0; border-top: 1px solid rgba(255,255,255,.2); padding: 12px 0 0; }
        .footer-bottom { flex-direction: column; gap: 5px; }
        .results-grid { grid-template-columns: 1fr; }
      }
    
      .hero-scene > div { display: none !important; }
      .results-carousel { position: relative; display: flex; align-items: center; gap: 10px; }
      .results-viewport { overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; flex: 1; }
      .results-viewport::-webkit-scrollbar { display: none; }
      .results-grid { display: grid; grid-auto-flow: column; grid-auto-columns: calc(50% - 7px); grid-template-columns: none; gap: 14px; width: max-content; }
      .results-arrow { width: 38px; height: 38px; flex: 0 0 38px; border: 1px solid #d9e1e8; border-radius: 50%; background: #fff; color: var(--sgc-blue); font-size: 27px; line-height: 1; box-shadow: 0 3px 10px rgba(10,35,55,.08); }
      .results-arrow:hover { color: var(--sgc-red); border-color: rgba(237,28,36,.4); }
      @media (max-width: 900px) { .category-grid { grid-template-columns: repeat(5,1fr); } .results-grid { grid-auto-columns: calc(50vw - 28px); } }
      @media (max-width: 620px) { .category-grid { grid-template-columns: repeat(2,1fr); } .results-grid { grid-auto-columns: calc(100vw - 42px); } .results-arrow { width: 34px; height:34px; flex-basis:34px; } }

/* ===== VISUAL REPAIR: approved SGC assets ===== */
.brand-image{display:flex;align-items:center;width:195px;height:65px;flex:0 0 195px}
.brand-image img{display:block;width:195px;height:65px;object-fit:contain}
.footer-brand{width:185px;height:auto;display:block}
.footer-brand img{display:block;width:185px;height:auto;object-fit:contain}

.hero-scene{display:flex;right:0;top:0;width:58%;height:100%;background:#eef2f5}
.hero-scene .hero-center-image{display:block;width:53%;height:100%;object-fit:cover;object-position:center top}
.hero-scene .hero-right-image{display:block;width:47%;height:100%;object-fit:cover;object-position:center top}
.hero-scene img::selection{background:transparent}

.company-photo{height:105px;background:#eef2f5}
.company-photo::before,.company-photo::after{display:none}
.company-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.company-no-image{height:100%;display:grid;place-items:center;padding:10px;text-align:center;color:var(--sgc-blue);font-size:12px;font-weight:800;background:#eef2f5}

.article-image,.video-image,.media-small{overflow:hidden}
.article-image img,.video-image img,.media-small img{display:block;width:100%;height:100%;object-fit:cover}
.article-image img{height:92px}
.video-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media-small img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media-small::after,.video-card::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 48%,rgba(0,0,0,.45));pointer-events:none}
.media-small span,.video-title,.video-play{z-index:3}

.how-icon,.how-icon svg{width:38px!important;height:38px!important;max-width:38px!important;max-height:38px!important}
.how-step{min-width:0}
.results-grid{grid-auto-columns:calc(50% - 7px)}
/* SGC COMERCIAL — galería dinámica de fotos y videos */
#media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
#media-grid .media-small { min-height: 204px; display: block; text-decoration: none; }
#media-grid .media-small span { z-index: 3; }
@media(max-width:760px){ #media-grid { grid-template-columns: 1fr; } #media-grid .media-small { min-height: 180px; } }

.result-card{overflow:hidden}
.result-image{height:150px;margin:-1px -1px 10px;overflow:hidden;background:#eef2f5}
.result-image img{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:760px){
  .brand-image{width:155px;height:auto;flex-basis:155px}
  .brand-image img{width:155px;height:auto}
  .hero-scene{width:100%;height:250px;top:330px}
  .hero-scene .hero-center-image{width:53%}
  .hero-scene .hero-right-image{width:47%}
  .company-grid{grid-template-columns:1fr 1fr}
}