@font-face {
    font-family: Inter;
    src: url(/font/Inter/static/Inter-Regular.ttf);
}


body{
    margin: 0;
    font-family: 'Inter', sans-serif;
}

.info{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;
}
.main-container-1920{
    display: flex;
    padding: 30px 76px;
    justify-content: space-around;
    align-items: center;
    background: #EFF2EB;
    gap: 100px;
}

.main-container-720{
    display: flex;
    flex-direction: column;
    padding: 40px;
    justify-content: center;
    align-items: center;
    background: #EFF2EB;
    gap: 40px;
}

.headline{
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
}

.btn-contract{
    display: flex;
    height: 63px;
    color: white;
    padding: 5px 12px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    align-self: stretch;
    border-radius: 10px;
    background: #6DB34C;
}

.video-rounded{
  border-radius: 16px;
  display: flex;   /* asegura proporción (opcional) */
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}

.description-container{
   display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 42px;
}

.panel-container{
    padding: 45px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.qa-btn{
  display: flex;
  padding: 12px 34px;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  align-self: stretch;
  border-radius: 10px;
  border: 1px solid #E2E2E2;
  background: #FFF;
  color: #111;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.qa-btn:hover,
.qa-btn:focus-visible{
  background: #6DB34C;      /* verde */
  border-color: #6DB34C;
  color: #fff;               /* texto blanco en hover */
  box-shadow: 0 4px 14px rgba(22,163,74,.25);
}

.qa-btn:active{
  transform: translateY(1px);
}

.reasons-container{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 40px;
}

.reason{
    display: flex;
    padding: 29px 30px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    border-left: 2px solid #6DB34C;
}


@media (max-width: 1024px) {
  .main-container-1920 { gap: 40px; padding: 30px; align-self: stretch;}  
    .video-rounded {width: 512px; height: 271px;}  /* desde 1024px en adelante */
}

@media (max-width: 1024px) {
 /* desde 1024px en adelante */
}

@media (max-width: 1024px) {
  .description-container {gap: 13px;}  /* desde 1024px en adelante */
}


@media (min-width: 320px) and (max-width: 720px) {
    .main-container-1920 {display: none;}
    .video-rounded {width: 100%; height: auto;}   /* hasta 720px */
    .reasons-container {flex-direction: column !important; gap: 15px;}
}

@media (min-width: 720px) and (max-width: 1920px) {
    .main-container-720 {display: none;}  /* hasta 720px */; /* hasta 720px */
    
}