@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Anton&display=swap');

body{
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    line-height: 1.42857143;
    color: #646464;
    background-color: #fff;
    
}

h1,h2{
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-style: normal;
}


a { text-decoration: none;}

/*estilos sitio web*/

.bg-navbar{
    background-color: #f8f4f0;
}

.bg-pink{
    background-color:#fff5f7
}
  
.btn-green {
    --bs-btn-color: #313131;
    --bs-btn-bg: #f4f9f1;
    --bs-btn-border-color: #f4f9f1;
    --bs-btn-hover-color: #494848;
    --bs-btn-hover-bg: #dafcc6;
    --bs-btn-hover-border-color: #dafcc6;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #b1c4a4;
    --bs-btn-active-border-color: #a5c293;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #353434;
    --bs-btn-disabled-bg: #c5c9c3;
    --bs-btn-disabled-border-color: #c5c9c3;
  }

  .btn-green i{
    color:#93c47d;
  }

  .btn-white {
    --bs-btn-color: #313131;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: #313131;
    --bs-btn-hover-bg: #f3f0f0;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: #fff;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #353434;
    --bs-btn-disabled-bg: #f2f2f2;
    --bs-btn-disabled-border-color: #f2f2f2;
  }

  .bg-orange {
    background-color: #e27759;
}
  
  .bg-green{
    background-color: #41b0a8;
  }

  .bg-green-100{
    background-color: #f4f9f2;
  }

  .bg-cream{
    background-color: #fefaf2;
  }

  .bg-cream-100{
    background-color: #fef9e9;
  }

  .bg-cream-200{
    background-color: #f5f0ed;
  }

  .bg-white-transparent{
    background-color: rgba(255, 255, 255, 0.3);
  }

  .bg-yellow{
    background-color: #fef9ec;
  }

  .bg-green-50{
    background-color: #f4f9f1;
  }

  .text-yellow{
    color: #f6c623;
  }

  .text-green{
    color: #93c47d;
  }

  .border-green{
    border-color: #93c47d !important;
  }

  .seccion1{
    background-image: url('../image/principal.svg');
    background-position: center center; /* Controla la posición del fondo */
    background-size: auto 2000px; /* Controla el tamaño del fondo */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
  }

  .seccion2{
    background-image: url('../image/header.svg');
    background-position: center center; /* Controla la posición del fondo */
    background-size: auto 2000px; /* Controla el tamaño del fondo */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
  }

  .seccion2 h2,.seccion5 h2 {
    color: #18a7a4;
  }

  .seccion3 h2{
    color: #e27759;
  }

  .seccion4{
    background-image: url('../image/foto.webp');
    background-position: center center; /* Controla la posición del fondo */
    background-size: cover; /* Controla el tamaño del fondo */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
  }

  .seccion5 {
    background-image: url('../image/header.svg');
    background-position: bottom center; /* Controla la posición del fondo */
    background-size: auto 1500px; /* Controla el tamaño del fondo */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
  }

  .seccion6 {
    background-image: url('../image/nubes.svg');
    background-position: top center; /* Controla la posición del fondo */
    background-size: auto 500px; /* Controla el tamaño del fondo */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
  }

  .seccion4 h2 span{
    background-color: rgba(4, 112, 126, 0.5);
    color:#fff;
  }

  .bg-footer{
    background: #313131;
  }

  .margin-top-negative {
    margin-top: -150px;
    margin-bottom: -150px; /* Ajusta este valor según necesites */
  }

  .tilo img {
    margin-top: -50px;
  }

  /* Media query para dispositivos móviles */
  @media (max-width: 767px) {
    .margin-top-negative {
      margin-top: -80px;
      margin-bottom: -40px;
    }

    .tilo{
      z-index: 1;
    }

    .tilo-text h3{
      font-size: 15px;
      margin-top: 0px;
    }

    .tilo img {
      max-width: 35%;
      float: right;
      margin-top: -205px;
      margin-right: -10px;
    }
  }

  .accordion-tilo {
    --bs-accordion-color: var(--bs-body-color);
    --bs-accordion-bg: var(--bs-body-bg);
    --bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
    --bs-accordion-border-color: #dee9d0 ;
    --bs-accordion-border-width: var(--bs-border-width);
    --bs-accordion-border-radius: var(--bs-border-radius);
    --bs-accordion-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
    --bs-accordion-btn-padding-x: 1.25rem;
    --bs-accordion-btn-padding-y: 1rem;
    --bs-accordion-btn-color: var(--bs-body-color);
    --bs-accordion-btn-bg: var(--bs-accordion-bg);
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23cce2c1' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
    --bs-accordion-btn-icon-width: 1.25rem;
    --bs-accordion-btn-icon-transform: rotate(-180deg);
    --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23cce2c1' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(176, 218, 183, 0.25);
    --bs-accordion-body-padding-x: 1.25rem;
    --bs-accordion-body-padding-y: 1rem;
    --bs-accordion-active-color: #313131;
    --bs-accordion-active-bg: #f3f5e6;
  }

  .accordion-tilo i, .card-title i{
    color:#93c47d;
  }

  .accordion-button-tilo {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
    font-size: 1rem;
    color: var(--bs-accordion-btn-color);
    text-align: left;
    background-color: var(--bs-accordion-btn-bg);
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
    transition: var(--bs-accordion-transition);
    font-family: "DM Sans", sans-serif;
    font-weight: bolder;
    color: #464646;
  }
  @media (prefers-reduced-motion: reduce) {
    .accordion-button-tilo {
      transition: none;
    }
  }
  .accordion-button-tilo:not(.collapsed) {
    color: var(--bs-accordion-active-color);
    background-color: var(--bs-accordion-active-bg);
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
  }
  .accordion-button-tilo:not(.collapsed)::after {
    background-image: var(--bs-accordion-btn-active-icon);
    transform: var(--bs-accordion-btn-icon-transform);
  }
  .accordion-button-tilo::after {
    flex-shrink: 0;
    width: var(--bs-accordion-btn-icon-width);
    height: var(--bs-accordion-btn-icon-width);
    margin-left: auto;
    content: "";
    background-image: var(--bs-accordion-btn-icon);
    background-repeat: no-repeat;
    background-size: var(--bs-accordion-btn-icon-width);
    transition: var(--bs-accordion-btn-icon-transition);
  }
  @media (prefers-reduced-motion: reduce) {
    .accordion-button-tilo::after {
      transition: none;
    }
  }
  .collapsed:hover {
    background-color: #f9f4e6;
    z-index: 2;
  }
  .accordion-button-tilo:focus {
    z-index: 3;
    outline: 0;
    box-shadow: var(--bs-accordion-btn-focus-box-shadow);
  }
  
  .accordion-header-tilo {
    
    margin-bottom: 0;
  }
  
  .accordion-item-tilo {
    color: var(--bs-accordion-color);
    background-color: var(--bs-accordion-bg);
    border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
    border-radius: var(--bs-accordion-border-radius);
    margin-bottom: 10px;
    overflow: hidden;
  }
  
  .accordion-body {
    padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x);
  }

  .top-shadow::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    box-shadow: 0 -10px 10px rgba(0, 0, 0, 0.9);
    z-index: -1;
}

.text-justify{
  text-align: justify;
}