:root {
  --light: hsl(0, 0%, 100%);
  --primary: hsl(257, 47%, 3%);
  --focus: hsl(208, 70%, 5%);
  --border-color: hsla(0, 11%, 2%, 0.2);
  --global-background: hsl(280, 33%, 30%);
  --background: linear-gradient(to right, hsl(210, 9%, 70%), hsl(254, 43%, 25%));
  --shadow-1: hsla(210, 32%, 49%, 0.3);
  --shadow-2: hsla(0, 56%, 51%, 0.4);
}

body {
    font-family: "Bungee Hairline", serif;
    line-height: 1.6;
    background: linear-gradient(to bottom,#fcdec9, #f7a96f, #f49c54, #f4822f);
    text-align: center;
  }

  section {
    border: none;
  }

  header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    transition: all 0.3s ease;
    background: linear-gradient(to right,#ffffff, #ffffff, #f7a96f, #f49c54);
    display: none;
  }
  
  header.scrolled {
    display: block;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  #logo {
    display: none;
  }

  #lugar {
  display: none;
  }

  #lugar2 { 
  display: none;
  }


  header.scrolled #logo {
    display: block;
    width: 220px;
  }

  .bungee-shade-regular {
    font-family: "Bungee Shade", serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .bungee-hairline-regular {
    font-family: "Bungee Hairline", serif;
  }
  
  .julius-sans-one-regular {
    font-family: "Julius Sans One", serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .container {
   margin: 30px auto;
    align-items: center;
    width: 95%;
    max-width: 100%;
  }

  h1 {
    color: #333;
    font-size: 2.5em;
  }
  
  h2 {
    color: #444;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
  }
  
  .hero {
    text-align: center;
    max-width: 100%;
    margin: 0 auto; /* Centrar el contenedor */
  }

  .hero h1 {
    font-family: "Bungee Shade", serif;
    font-size: 6rem;
    margin-bottom: 10px;
    color: #3D5300;
    text-shadow: 1px 0 #ffffff, -2px 0 #ffffff, 0 2px #ffffff, 0 -1px #ffffff,
    0 0 5px rgb(255, 255, 255), 0 0 10px rgb(255, 255, 255), 0 0 20px rgb(255, 255, 255), 0 0 40px #f4822f, 0 0 80px #f4822f;
}

  .hero h1:hover {
    cursor: pointer;
    transition-duration: 1100ms;
    text-shadow: 1px 0 #073e0e, -2px 0 #ffffff, 0 2px #fcf8fc, 0 -1px #073e0e,
    1px 1px #073e0e, -1px -1px #073e0e, 1px -1px #f5eef5, -1px 1px #073e0e;
}

.dolores {height: 40px;}

.confianza {
  background-color: #012205;
}

  #dologo { 
    margin: 0 auto;
    width: 470px;
    height: 100px;
    margin-bottom: 0;
  }

  #dologo P {
    font-family: "Bungee Hairline", serif;
    font-weight: bold;
    font-size: 1.5rem;
    color: #000000;
    background: linear-gradient(to right, #073e0e 0%, #012205 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  #dologo p:hover {
    background: url('img/Dolores.png');
    border-radius: 58px;
    box-shadow: #073e0e 0px 0px 10px;
    cursor: pointer;
    transition: all 0.8s ease;
  }

  .hero p {
    font-family: "Bungee Hairline", serif;
    font-weight: bold;
    font-size: 1.5rem;
    color: #000000;
    background: linear-gradient(to right, #073e0e 0%, #012205 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    }

    .btn { 
      font-family: "Bungee Hairline", serif;
      text-align: center;
      font-weight: 800;
      font-size: 1.1rem;
      color: #ffffff;
      border: #ffffff 1px solid;
      box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
      border-radius: 8px;
      background-color: #073e0e;
       }
    
    .btn:hover {
      background-color: #ffffff;
      color: #073e0e;
      border: #073e0e 1px solid;
      box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    }
  
    .collapse:not(.show) {
      display: none;
    }
    
    .collapsing {
      height: 0;
      overflow: hidden;
      transition: height 2.3s ease; /* Reemplaza con tu transición específica */
    }

    .card {
      margin-top: 5px;
      font-family: "Julius Sans One", serif;
      text-align: center;
      align-items: center;
      font-weight: 600;
      font-size: 0.9rem;
      color: #000000;
      border: #ffffff 1px solid;
      box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
      border-radius: 8px;
      background-color: #ffffff;
       }
    
    .img-fluid {
      width: 400px;
      height: auto;
      border-radius: 12px;
      border: #ffffff 1px solid;
      box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    }

    .stihl {
      margin-top: 55px;
    }

    .stihl h1 {
      font-family: "Bungee Hairline", serif;
      font-weight: bold;
      font-size: 1.5rem;
      color: #000000;
      background: linear-gradient(to right, #073e0e 0%, #012205 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      padding-bottom: 10px;
      }
    
      .stihl p {
        padding-top: 25px;
         font-size: 1.3rem;
         font-weight: bold;
         color: #000000;
      background: linear-gradient(to right, #073e0e 0%, #012205 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;;
       }


  footer {
    text-align: center;
    color: #000000;
      background: linear-gradient(to right, #073e0e 0%, #012205 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;;
  }


  @media only screen and (max-width: 768px) {

    body {
      font-size: 1.8rem;
    }

    header {
      width: 100%;
      background: #ffffff;
      }

    #dologo {
      display: none;
    }

    #confianza {
      margin-top: 35PX;
      font-size: 1.1rem;
    }

    #lugar {
      margin-bottom: 0;
      display: block;
      }
    
      #lugar2 { 
      margin-top: 0;
      font-size: 1rem;
      display: block;
      }

    .container {
      width: 100%;
      max-width: 100%;
      margin: 40px auto; /* Centrar el contenedor */
      justify-content: center;
      align-items: center;
      text-align: center;
    }
    .hero {
      max-width: 100%;
      margin: 0 auto; /* Centrar el contenedor */
    }

    .contact {
      font-size: 1rem;
      width: 100%;
      margin: 0 auto; /* Centrar el contenedor */
      text-align: center;
    }

    .hero h1 {
      font-size: 2.9rem;
    }
    .hero p {
      font-size: 1.5rem;
    }

    .btn { 
      font-family: "Bungee Hairline", serif;
      text-align: center;
      font-weight: 800;
      font-size: 1.1rem;
      color: #ffffff;
      border: #ffffff 1px solid;
      box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
      border-radius: 8px;
      background-color: #073e0e;
       }

    .collapse:not(.show) {
      display: none;
    }
    
    .collapsing {
      height: 0;
      overflow: hidden;
      transition: height 2.3s ease; /* Reemplaza con tu transición específica */
    }

    .card {
      font-family: "Julius Sans One", serif;
      text-align: center;
      font-weight: 600;
      font-size: 0.9rem;
      color: #000000;
      border: #ffffff 1px solid;
      box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
      border-radius: 8px;
      background-color: #ffffffbf;
       }
    
    .img-fluid {
      border-radius: 12px;
      border: #ffffff 1px solid;
      box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    }

    .stihl {
      margin: 0 auto;
      padding-top: 25px;
      width: 100%;
      margin-top: 35px;
    }

    .stihl h1 {
      font-size: 1.5rem;
      padding-bottom: 15px;
   }

   .stihl p {
    padding-top: 19px;
     font-size: 1.1rem;
     font-weight: bold;
     color: #000000;
      background: linear-gradient(to right, #073e0e 0%, #012205 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
   }

   #textra {
    display: none; }

    footer {
      width: 100%;
      text-align: center;
      color: #000000;
      background: linear-gradient(to right, #073e0e 0%, #012205 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;;
    }

  }