@font-face {
    font-family: 'Futura Condensed Bold';
    src: url(/assets/fonts/Futura_Condensed_Bold.otf);
  }

  @font-face {
    font-family: 'Berkeley Oldstyle Italic';
    src: url(/assets/fonts/Berkeley_Oldstyle_Italic.ttf);
  }

  html {
    font-size: 82.5%;
  }
  
  body {
    font-family: 'Berkeley Oldstyle Italic';
    font-size: 1.8rem;
    font-weight: 400;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Futura Condensed Bold';
    font-weight: 600;
    color: #a39c8d;
  }

  p {
    font-family: 'Berkeley Oldstyle Italic';
    font-weight: 500;
    letter-spacing: .08rem;
    color: #a39c8d;
  }


  .box-1 {
    background-color: #dad3c3;
  }

  .box-2 {
    background-color: #b9c5c3;
  }

  .color-1 {
    background-color: #dad3c3;
  }
  
  .color-2 {
    background-color: #b9c5c3;
  }

  .color-3 {
    color: #a39c8d;
  }

  .logo {
    max-width: 60%;
    height: auto;
    padding: 5rem;
  }

  .l-cordelia {
    height: auto;
  }

  .btn-cordelia {
    font-family: 'Futura Condensed Bold';
    font-size: 1.6rem;
    font-weight: 500;
    color: #ffffff;
    text-transform: uppercase;
    padding: .5rem;
    text-decoration: none;
  }

  .header-cordelia {
    background-image: url("/landing/assets/images/acceso-duotono.jpg");
    box-shadow: inset 0 0 0 1000px rgba(0,0,0,.30);
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    background-blend-mode: multiply;

  }

  .cordelia-lotes {
    background-image: url("/assets/images/render-finales-28022025/acceso-carretera.jpg");
    box-shadow: inset 0 0 0 100rem rgba(0,0,0,.10);
    padding: 5rem 0 50rem;
    background-position: center bottom; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    background-blend-mode: multiply;
  }

  .cordelia-lotes p {
    font-weight: 600;
    color: #a39c8d;
  }

  #casa-club h3 {
    font-size: 1.4rem;
    text-transform: uppercase;
  }

  a {
    font-family: 'Berkeley Oldstyle Italic';
    text-decoration: none;
    font-weight: 800;
  }

  li {
      font-family: 'Berkeley Oldstyle Italic';
      font-size: 1.2rem;
      font-weight: 500;
      letter-spacing: .08rem;
  }

  label {
    font-family: 'Futura Condensed Bold';
    color: #a39c8d;
    font-weight: 400;
    font-size: 1.5rem;
  }
  input::placeholder{
    font-family: 'Berkeley Oldstyle Italic';
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: .08rem;
  }

  .btn-form {
    font-family: 'Futura Condensed Bold'!important;
    font-size: 1.6rem!important;
    font-weight: 500!important;
    color: #a39c8d!important;
    text-transform: uppercase!important;
    padding: .5rem!important;
    margin: 1rem!important;
    text-decoration: none!important;
    border: .3rem solid #ffffff!important;
    border-radius: 0px!important;
  }

 /* Extra small devices (phones, 600px and down) */
 @media only screen and (max-width: 600px) {
  .cordelia-lotes {
    padding: 5rem 0 30rem;
  }
  .logo {
    max-width: 100%;
    height: auto;
    padding: 1rem;
  }
  .l-cordelia {
    max-width: 30%;
  }
 }

 /* Small devices (portrait tablets and large phones, 600px and up) */
 @media only screen and (min-width: 600px) {
  .cordelia-lotes {
    padding: 5rem 0 30rem;
  }
  .logo {
    max-width: 100%;
    height: auto;
    padding: 1rem;
  }
  .l-cordelia {
    max-width: 15%;
  }
 }
 
 /* Medium devices (landscape tablets, 768px and up) */
 @media only screen and (min-width: 768px) {
  .cordelia-lotes {
    padding: 5rem 0 30rem;
  }
  .logo {
    max-width: 50%;
    height: auto;
    padding: 1rem;
  }
  .l-cordelia {
    max-width: 15%;
  }
 }
 
 /* Large devices (laptops/desktops, 992px and up) */
 @media only screen and (min-width: 992px) {
  .cordelia-lotes {
    padding: 5rem 0 40rem;
  }
  .logo {
    max-width: 50%;
    height: auto;
    padding: 1rem;
  }
  .l-cordelia {
    max-width: 15%;
  }
 }
 
 /* Extra large devices (large laptops and desktops, 1200px and up) */
 @media only screen and (min-width: 1200px) {
  .cordelia-lotes {
    padding: 5rem 0 50rem;
  }
  .l-cordelia {
    max-width: 12%;
  }
 } 