/* Definimos las Custom properties */
:root{
  accent-color: #70BC7E ;
    --verdePrincipal500: #70BC7E;
--verdeOscuro600: #43945F;
--verdeClaroHover: #A6CDAA;
--negro: #080f1a;
--greyDark: #3a4d65;
--greyDarkMedium: #859cb9;
--greyDrakLighter: #d6fadd;
--bgPrincipal: #fafcfb;
--bgCard: #f1f6f3;
    /* Tipografía */
--tipo-principal   : "Open Sans", sans-serif;
--tipo-secundaria  : "Raleway", sans-serif;
    /* Margenes */
--margenDesktop: clamp(3.125rem, -32.125rem + 39.167vw, 14.875rem);
--margenMovil: clamp(1rem, -0.619rem + 8.095vw, 3.125rem);
  }
    
  /* (Opcional) Las adaptamos al modo oscuro */
  /* @media (prefers-color-scheme: dark) {
    :root{
        --negro         : #ececec;
    }
  } */
  
  /* (Opcional) Configuramos si un usuario ha activado el modo alto contraste. (WD) */
  /* @media (prefers-contrast: high){
      :root{}
  } */
  
  /* (Opcional) Desactivamos los animations en el caso de que el usuario haya configurado el modo sin animation */
  @media (prefers-reduced-motion: reduce) {
    * {
      animation: none !important;
      transition: none !important;
    }
  }
  
  /* Reseteamos los margin y paddings de todas las etiquetas */
  * , *::before , *::after{
    /* background-color: rgba(239, 176, 93, 0.293);
    outline: 1px solid sandybrown; */
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    vertical-align: baseline;
  }
  *::before , *::after{
    display: block;
  }
  
  /* Evitamos problemas con las imagenes */
  img , picture , video , iframe , figure{
    max-width: 100%;
    width: 100%;
    display: block;
    /* (Opcional) */ object-fit: cover;        
    /* (Opcional) */ object-position: center center;
  }
  
  /* Reseteamos los enlaces para funcionar como cajas... */
  a {
    display: block;
    text-decoration: none;
    color:inherit;
    font-size:inherit;
  }
  /* ... excepto los que se encuentran en párrafos */
  p a {
    display: inline;
  }
  
  /* Quitamos los puntos de los <li> */
  li {
    list-style-type: none;
  }
  
  /* (Opcional) Configuramos anclas suaves */
  html {
    scroll-behavior: smooth;
   font-family: var(--tipo-principal);
  }
  
  /* Desactivamos estilos por defecto de las principales etiquetas de texto */
  h1 , h2 , h3 , h4 , h5 , h6 , p ,span , a , strong , blockquote , i , b , u , em {
    font-size: inherit;
    font-weight: inherit;
    font-style: inherit;
    text-decoration: none;
    color: inherit;
  }
  /* Evitamos problemas con los pseudoelementos de quotes */
  blockquote:before, blockquote:after, q:before, q:after {
      content: '';
      content: none;
  }
  
  /* (Opcional) Configuramos el texto que seleccionamos */
  ::selection {
    background-color: var(--negro);
    color: var(--blanco);
  }
  
  /* Nivelamos problemas de tipografías y colocación de formularios */
  form , input, textarea, select , button , label{
      font-family: inherit;
      font-size: inherit;
      hyphens: auto;
      background-color: transparent;
      color:inherit;
      display: block;
      /* (Opcional) */ appearance: none;
  }
  
  /* Reseteamos las tablas */
  table , tr , td {
    border-collapse: collapse;
    border-spacing: 0;
  }
  
  
  /* Configuramos la tipografía para toda la web */
  body {
    
    min-height  : 100vh;
    font-size   : 100%;
    color       : var(--negro);
    /* (Opcional) */ hyphens: auto;
    /* (Opcional) */ font-smooth: always;
    /* (Opcional) */ -webkit-font-smoothing: antialiased;
    /* (Opcional) */ -moz-osx-font-smoothing: grayscale;
  }