:root {
    /* Colores */
    --color-principal: #008929;
    --color-secundario: #4CAF50;
    --color-danger: #f44336;
    --color-blanco: white;
    --color-fondo-modal: rgba(0, 0, 0, 0.6);
    --color-texto-negro: black;
    --color-texto-blanco: white;
    --color-sombra: rgba(0, 0, 0, 0.2);
    --color-sombra-fuerte: rgba(0, 0, 0, 0.6);
    --color-scrollbar-bg: rgba(0, 0, 0, 0.1);
    --color-scrollbar-thumb: var(--color-principal);

    /* Fuentes */
    --font-poppins: 'Poppins', sans-serif;
    --font: "Open Sans", sans-serif, Arial;
    --font-size: 1rem;
    --font-size-medium: 0.9375rem;
    --font-size-small: 0.875rem;
    --h1-font-size: 3rem;
    --h2-font-size: 2.5rem;
    --h3-font-size: 2rem;
    --h4-font-size: 1.75rem;
    --h5-font-size: 1.5rem;
    --h6-font-size: 1.25rem;
    --pading-general: clamp(20px, 4vw, 50px);
    --pading-general2: clamp(40px, 10vw, 150px);

    --transition-duration: 0.2s;  /* Duración de la transición - etiqueta a animar - transition: all var(--transition-duration) var(--transition-ease); */
    --transition-ease: ease;      /* Función de aceleración - etiqueta a animar - transition: all var(--transition-duration) var(--transition-ease); */
    --transform-scale: 0.96
}
body {
      font-family: var(--font);
      margin: 0;
      line-height: 1.5;
      color: #232323;
    }

    h1, h2 {
      color: var(--color-principal);
      font-family: var(--font-poppins);
    }

    section {
      margin-bottom: 3rem;
      text-align: justify;
    }

    header {
      text-align: center;
      margin-bottom: 2rem;
    }

    .container-general{
    max-width: 1500px;
    margin: 0 auto;
    min-height: 100vh;
    padding: var(--pading-general) var(--pading-general2);

    }

@media (min-width: 1700px){ .container-general{max-width: 1600px;}}
@media (max-width: 767px){
    .container-general{padding: 25px 18px;} 
}