* {
  box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding: var(--scroll-padding, 5rem);
  }
  
  /* general styling */
  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  * {
    margin: 0;
    padding: 0;
    font: inherit;
  }
  
  :root {
    --ff: 'Fira Sans', sans-serif;
  
    --fw-n: 300;
    --fw-m: 600;
    --fw-b: 800;
    
    --fs-2: 5rem;
    --fs-p: 1rem;
    
    --primary-clr: #225560;
    --secondary-clr: #36213E;
    --secondary-clr-light: #554971;
    --accent-clr: #EF6461;
  
    --spacer: 1rem;
    --spacer-md: calc(var(--spacer) * 2);
    --spacer-lg: calc(var(--spacer) * 3);
    
    --shadow: 0 0 1em rgba(0,0,0, .25);
    --br: 5px;

    --fs-900: 3rem;
    --fs-800: 2.5rem;
    --fs-700: 2rem;
    --fs-500: 1.5rem;
    --fs-400: 1rem;
    --fs-200: 0.75rem
    --fw-400: 400;
    --fw-600: 600;
    --fw-700: 700;
  
    --size-200: 1rem;
    --size-300: 1.2rem;
    --size-400: 1.5rem;
    --size-500: 3rem;
    --size-600: 6rem;
  
    --clr-neutral-900: hsl(0, 9%, 11%);
    --clr-neutral-200: hsl(36, 24%, 96%);
    --clr-neutral-100: hsl(0, 0%, 100%);
  
    --clr-primary-200: hsl(213, 43%, 79%);
    --clr-primary-300: hsl(190, 84%, 50%);
    --clr-primary-400: hsl(217, 100%, 50%);
    --clr-primary-500: hsl(190, 100%, 28%);
  }
  
  /* Box sizing rules */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  /* Gerenal spacing and font reset */
  * {
    margin: 0;
    padding: 0;
    font: inherit;
  }
  
  /* Set core body defaults */
  body {
    min-height: 100vh;
    text-rendering: optimizeSpeed;
    line-height: 1.5;
  }
  
  a {
    color: inherit;
    text-decoration-color: rgb(107, 107, 107);
  }
  
  a:where(:hover, :focus) {
    text-decoration-color: currentColor;
  }
  
  code {
    font-family: monospace;
  }
  
  /* Make images easier to work with */
  img,
  picture {
    max-width: 100%;
    display: block;
  }
  
  
  /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
  @media (prefers-reduced-motion: reduce) {
    html:focus-within {
      scroll-behavior: auto;
    }
  
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
  
  /* Utilities */
  
  .fs-900 {
    font-size: var(--fs-900);
  }
  .fs-800 {
    font-size: var(--fs-800);
  }
  .fs-700 {
    font-size: var(--fs-700);
  }
  .fs-500 {
    font-size: var(--fs-500);
  }
  .fs-400 {
    font-size: var(--fs-400);
  }
  .fs-300 {
    font-size: var(--fs-300);
  }
  .fs-200 {
    font-size: var(--fs-200);
  }
  .fw-regular {
    font-weight: var(--fw-400);
  }
  .fw-bold {
    font-weight: var(--fw-600);
  }
  
  .surface-neutral-100 {
    background-color: var(--clr-neutral-100);
  }
  .surface-neutral-200 {
    background-color: var(--clr-neutral-200);
  }
  .surface-neutral-900 {
    background-color: var(--clr-neutral-900);
  }
  .surface-primary-200 {
    background-color: var(--clr-primary-200);
  }
  .surface-primary-300 {
    background-color: var(--clr-primary-300);
  }
  .surface-primary-400 {
    background-color: var(--clr-primary-400);
  }
  .surface-primary-500 {
    background-color: var(--clr-primary-500);
  }
  
  .text-neutral-100 {
    color: var(--clr-neutral-100);
  }
  .text-neutral-200 {
    color: var(--clr-neutral-200);
  }
  .text-neutral-900 {
    color: var(--clr-neutral-900);
  }
  .text-primary-300 {
    color: var(--clr-primary-300);
  }
  .text-primary-400 {
    color: var(--clr-primary-400);
  }
  .text-primary-500 {
    color: var(--clr-primary-500);
  }
  
  .text-left {
    text-align: left;
  }
  .text-center {
    text-align: center;
  }
  
  .margin-auto {
    margin: auto;
  }
  
  .margin-block-auto {
    margin-block: auto;
  }
  .margin-inline-auto {
    margin-inline: auto;
  }
  .margin-top-auto {
    margin-top: auto;
  }
  .margin-bottom-auto {
    margin-bottom: auto;
  }
  .margin-right-auto {
    margin-right: auto;
  }
  .margin-left-auto {
    margin-left: auto;
  }
  
  .margin-top-400 {
    margin-top: var(--size-400);
  }
  .margin-top-500 {
    margin-top: var(--size-500);
  }
  .margin-top-600 {
    margin-top: var(--size-600);
  }
  .margin-bottom-400 {
    margin-bottom: var(--size-400);
  }
  .margin-bottom-500 {
    margin-bottom: var(--size-500);
  }
  .margin-bottom-600 {
    margin-bottom: var(--size-600);
  }
  
  .margin-block-400 {
    margin-block: var(--size-400);
  }
  .margin-block-500 {
    margin-block: var(--size-500);
  }
  .margin-block-600 {
    margin-block: var(--size-600);
  }
  
  .padding-block-200 {
    padding-block: var(--size-200);
  }
  .padding-block-400 {
    padding-block: var(--size-400);
  }
  .padding-block-500 {
    padding-block: var(--size-500);
  }
  .padding-block-600 {
    padding-block: var(--size-600);
  }
  
  .padding-block-auto {
    padding-block: auto;
  }
  .padding-inline-auto {
    padding-inline: auto;
  }
  .padding-top-auto {
    padding-top: auto;
  }
  .padding-bottom-auto {
    padding-bottom: auto;
  }
  .padding-right-auto {
    padding-right: auto;
  }
  .padding-left-auto {
    padding-left: auto;
  }
  
  .padding-400 {
    padding: var(--size-400);
  }
  
  .padding-500 {
    padding: calc(var(--size-400) * 2);
  }
  
  .border-right-thin {
    border-right: 1px solid rgb(197, 192, 182);
  }
  
  :where(.flow > :not(:first-child)) {
    margin-top: var(--flow-space, var(--size-400));
  }
  
  .flex {
    display: flex;
    flex-wrap: wrap;
    width: fit-content;
    gap: var(--gap, var(--size-400));
  }
  
  .flex-flow {
    display: flex;
    flex-direction: column;
    gap: var(--flow-space, var(--size-400));
  }
  
  .text-center .flex {
    margin: 0 auto;
  }
  
  .container {
    --max-width: 75rem;
    width: min(100% - 2rem, var(--max-width));
    margin-inline: auto;
  }
  
  /* general styling */
  
  body {
    font-family: system-ui, sans-serif;
    font-size: var(--fs-400);
    line-height: 1.4;
    color: var(--clr-neutral-900);
    background-color: var(--clr-neutral-200);
  }
  
  [class*="grid-"] {
    display: grid;
    gap: 1rem;
  }
  
  .grid-even-columns {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  }
  
  @media (min-width: 50em) {
    .grid-auto-flow {
      grid-auto-flow: column;
      grid-auto-columns: 1fr;
    }
  }

  .nome1 {
    grid-area: B;
  }

  .nome2 {
    grid-area: F;    
  }
  
  .Logo {
    grid-area: Z;    
  }
  
  .Logo > img {
    grid-area: Z;
    aspect-ratio: 16/3;
    min-height: 30vh;
    place-items: center;
    object-fit: cover;
    z-index: -1;
  }
  
  p {
    opacity: 0.85;
  }
  
  h2 {
    font-size: 5rem !important;
    font-weight: 900;
  }
  
  .button {
    
    width: 200px;
    margin: auto;
    align-items: end;  
    background: var(--primary-clr);
    color: white;
    text-decoration: none;
    padding: 1em 1.5em;
    border-radius: var(--br);
    font-weight: var(--fw-b);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: .8rem; 
    text-align: center;
  }
  
  .button2--card {
    width: 200px;
    margin: auto;
    text-align: center;
    align-items: end;  
    margin: auto;
    grid-area: btn;
    -ms-transform: translateY(-80%);
    transform: translateY(-80%);
  }

  .button1--card {
    margin: auto;
    text-align: center;
    justify-content: center;
    position: relative;
    align-items: end;
    -ms-transform: translateY(-26%);
    transform: translateY(-26%);
  }

  .container1 {
    width: 90%;
    max-width: 1200px;
    margin: 10 auto;
    gap: 1rem;
    row-gap: 1rem;
    position: relative;
  }

  .card {
    border-radius: var(--br);
    overflow: hidden;
    box-shadow: var(--shadow);
    display: grid;
    grid-template-areas: 
      "tit"
      "crp"
      "btn";  
    grid-template-rows:  50px 250px 50px;
  }

  .card_borrachas {
    border-radius: var(--br);
    overflow: hidden;
    box-shadow: var(--shadow);
    display: grid;
    grid-template-areas: 
      "tit"
      "img"
      "txt";  
    grid-template-rows:  50px 170px 130px;
  }

  .tit {
    grid-area: tit;
  }

  .crp {
    grid-area: crp;
  }

  .btn {
    grid-area: btn;
  }
  
  .img {
    grid-area: img;
    align-items: center;
    justify-items: center;
    align-items: stretch;
  }

  .txt {
    grid-area: txt;
  }

  .card_image {
    justify-self: center;
    align-self: center;
    margin-top: 10px;
    width: 75%;
    height: 75%;
    /*object-fit: cover;*/
  }
  
  .center_image {
    margin: auto;
    margin-left: auto;
    margin-right: auto;
  }

  .vcenter {
     display: flex;
     justify-content: center;
     align-items: center;
  }

  .card--important {
    --primary-clr: var(--accent-clr);
  }
  
  .card__title {
    background: var(--primary-clr);
    color: rgba(255,255,255,.7);
    margin: 0;
    padding: var(--spacer) 0;
    font-weight: var(--fw-m);
    letter-spacing: 2px;
    text-align: center;
    font-size: .8rem;
    text-transform: uppercase;
  }
  
  .card__price {
    color: var(--primary-clr);
    padding: 1em var(--spacer-lg);
    margin: 0;
    font-size: 2em;
    font-weight: var(--fw-b);
  }
  
  .card__price span {
    font-size: .5em;
    font-weight: var(--fw-n);
  }
  
  .card__body {
    margin-top: 10px;
    padding: 0 var(--spacer-lg) 2em;
  }

  #mapouter {
    display: grid;
    grid-template-columns: 320px 320px 280px;
    grid-template-rows: 100px, 100px, 100px;
  }

  #mapouter > div {
    text-align: justify;
    align-content:stretch;
    padding: 20px 0;
  }
  .mapa {
    /* grid-area: mp; */
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: span 3;
  }

  .gmap_canvas {
    overflow:hidden;
    background:none !important;
    width:800px;
    height:500px;
  }

  .gmap_iframe {height:500px!important;}
  
  .end1 {
    /* grid-area: e1; */
    grid-column-start: 3;
    grid-column-end: col4-start;
    grid-row-start: 1;
    grid-row-end: 2;
    height: 100px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 20px;
  }

  .end2 {
    /* grid-area: e2; */
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
    height: 100px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 20px;
  }

  .end3 {
    /* grid-area: e3; */
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 4;
    font-family:fantasy;
    height: 100px;
    padding: 20px;
  }

  @media all and (min-width: 450px) {

    .Logo > img {
      grid-area: Z;
      aspect-ratio: 12/3;
      min-height: 10vh;
    }

    .primary-navigation {

      position: sticky;
      top: 0;
      z-index: 1000;
      padding-top: 2rem;
      padding-bottom: 2rem;
      font-size: 1rem;
      background: var(--clr-primary-400);
    }
    
    .nav-list {
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      gap: 1rem;
      list-style: none;
    }
  }

  @media all and (min-width: 720px) {

    .primary-navigation {

      position: sticky;
      top: 0;
      z-index: 1000;
      padding-top: 2rem;
      padding-bottom: 2rem;
      font-size: 1rem;
      background: var(--clr-primary-400);
    }
    
    .nav-list {
      display: flex;
      flex-direction: row;
      justify-content: center;
      gap: 1rem;
      list-style: none;
    }
    
    .nav-list a {
      color: white;
      font-size: 1.5rem;
      font-weight: 700;
      text-decoration: none;
    }

    .grid-stack {
      display: grid;
      gap: 20px;
      height: 50vh;
    
      grid-template-areas: 
      "B B"
      "Z Z"
      "F F";
  
      place-items: center;
    }
    .pricing__grid {
      position: relative;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-column-gap: var(--spacer-md);
      gap: 50px;
      row-gap: 1rem;
      grid-auto-rows: 370px;
    }
    
    .marcas__grid {
      position: relative;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-column-gap: var(--spacer-md);
      gap: 20px;
      row-gap: 1rem;
      grid-auto-rows: 200px;
      align-items: center;
      justify-content: center;
    }

    .accessories__grid {
      position: relative;
      display: grid;
      grid-template-areas: 
      "box1 box1"
      "box2 box2";
      grid-template-columns: repeat(2, 1fr);
      grid-column-gap: var(--spacer-md);
      gap: 50px;
      row-gap: 1rem;
      grid-auto-rows: 220px;
    }
  
    .accessorios__grid {
      position: relative;
      display: grid;
      grid-template-areas: 
      "box1 box1"
      "box2 box2"
      "box3 box3"
      "box4 box4";
  
      grid-template-columns: repeat(2, 1fr);
      grid-column-gap: var(--spacer-md);
      gap: 50px;
      row-gap: 1rem;
      grid-auto-rows: 300px;
    }
  }

  @media all and (min-width: 1024px) { 

    .primary-navigation {
      position: sticky;
      top: 0;
      z-index: 1000;
      padding-top: 3rem;
      padding-bottom: 3rem;
      font-size: 1rem;
      background: var(--clr-primary-400);
    }
    
    .nav-list {
      display: flex;
      flex-direction: row;
      justify-content: center;
      gap: 3rem;
      list-style: none;
    }
    
    .nav-list a {
      color: white;
      font-size: 1.5rem;
      font-weight: 700;
      text-decoration: none;
    }
    .grid-stack {
      display: grid;
      gap: 20px;
      height: 30vh;
    
      grid-template-areas: 
      "A A A A   Z Z Z Z   D D D D"
      "B B B B   Z Z Z Z   E E E E"
      "C C C C   Z Z Z Z   F F F F";
  
      place-items: center;
    }
    .pricing__grid {
      position: relative;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-column-gap: var(--spacer-md);
      gap: 50px;
      row-gap: 1rem;
      grid-auto-rows: 370px;
    }
    
    .marcas__grid {
      position: relative;
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      grid-column-gap: var(--spacer-md);
      gap: 20px;
      row-gap: 1rem;
      grid-auto-rows: 200px;
      align-items: center;
      justify-content: center;
    }
    .accessories__grid {
      position: relative;
      display: grid;
      grid-template-areas: 
      "box1 box1 box1"
      "box2 box2 box2";
      grid-template-columns: repeat(3, 1fr);
      grid-column-gap: var(--spacer-md);
      gap: 50px;
      row-gap: 1rem;
      grid-auto-rows: 220px;
    }
  
    .accessorios__grid {
      position: relative;
      display: grid;
      grid-template-areas: 
      "box1 box1 box1"
      "box2 box2 box2"
      "box3 box3 box3"
      "box4 box4 box4";
  
      grid-template-columns: repeat(3, 1fr);
      grid-column-gap: var(--spacer-md);
      gap: 50px;
      row-gap: 1rem;
      grid-auto-rows: 300px;
    }
  }