@font-face {
  font-family: 'Roboto';
  src: url('/assets/fonts/Roboto/Roboto-VariableFont_wdth,wght.woff2') format('woff2'),
       url('/assets/fonts/Roboto/Roboto-VariableFont_wdth,wght.woff') format('woff'),
       url('/assets/fonts/Roboto/Roboto-VariableFont_wdth,wght.ttf') format('truetype');
  font-display: swap;
  font-weight: 100 900;
}
@font-face {
  font-family: 'Roboto Condensed';
  src: url('/assets/fonts/Roboto_Condensed/RobotoCondensed-VariableFont_wght.woff2') format('woff2'),
       url('/assets/fonts/Roboto_Condensed/RobotoCondensed-VariableFont_wght.woff') format('woff'),
       url('/assets/fonts/Roboto_Condensed/RobotoCondensed-VariableFont_wght.ttf') format('truetype');
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 75% 87.5%;
}

/* Roboto Serif Variable - CORREGIDO */
@font-face {
  font-family: 'Roboto Serif';
  src: url('/assets/fonts/Roboto_Serif/RobotoSerif-VariableFont_GRAD,opsz,wdth,wght.woff2') format('woff2'),
       url('/assets/fonts/Roboto_Serif/RobotoSerif-VariableFont_GRAD,opsz,wdth,wght.woff') format('woff'),
       url('/assets/fonts/Roboto_Serif/RobotoSerif-VariableFont_GRAD,opsz,wdth,wght.ttf') format('truetype');
  font-display: swap;
  font-weight: 100 900;
  font-optical-sizing: auto;
}

:root {
--container-mobile: 576px;
--container-tablet: 768px;
--container-desktop: 1024px;

/* COLOR PALETTE */
--color-first: #5B7328;
--color-second: #868322;
--color-third: #685320;
--color-cream: #fdf6c7 ;
--color-white: #FFFFFF;
--color-black: #000000;
--color-dark-green: #3D4D1A;
--color-dark-gray: #363636;
--color-gray: #5f5f5f;
--color-light-gray: #939393;
--color-gray-cream:#EDEAD9;

/* TYPOGRAPHY */
--font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto Fallback', system-ui, sans-serif;
--font-serif: 'Roboto Serif', Georgia, 'Times New Roman', serif;
--font-roboto: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto Fallback', system-ui, sans-serif;
--font-roboto-condensed: 'Roboto Condensed', 'Arial Narrow', 'Liberation Sans Narrow', sans-serif;

--font-size-base: 1rem;      /* 16px */


--line-height-base: 1.5;     /* 24px */
--vertical-rhythm: 1.5rem;   /* 24px - unidad base */

/* Font Scale */
--font-size-xs: 0.75rem;     /* 12px */
--font-size-sm: 0.875rem;    /* 14px */
--font-size-base: 1rem;      /* 16px */
--font-size-lg: 1.125rem;    /* 18px */
--font-size-xl: 1.25rem;     /* 20px */
--font-size-2xl: 1.5rem;     /* 24px */
--font-size-3xl: 1.875rem;   /* 30px */
--font-size-4xl: 2.25rem;    /* 36px */
--font-size-5xl: 3rem;       /* 48px */
--font-size-6xl: 3.75rem;    /* 60px */
--font-size-7xl: 4.5rem;     /* 72px */


/* Font Weight */
--font-weight-thin: 100;
--font-weight-light: 300;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-black: 900;


/* Fraction spaces */
--space-px: 1px;
--space-0-5: 0.125rem; /* 2px */
--space-1-5: 0.375rem; /* 6px */

/* Space scale */
--space-1: 0.5rem;   /* 8px */
--space-2: 1rem;     /* 16px */
--space-3: 1.5rem;   /* 24px */
--space-4: 2rem;     /* 32px */
--space-5: 2.5rem;   /* 40px */
--space-6: 3rem;     /* 48px */
--space-8: 4rem;     /* 64px */
--space-10: 5rem;    /* 80px */
--space-12: 6rem;    /* 96px */
--space-16: 8rem;    /* 128px */
--space-18: 9rem;
--space-20: 10rem;   /* 160px */
--space-21: 10.5rem;
--space-22: 11rem;
--space-24: 12rem;   /* 192px */
--space-32: 16rem;   /* 256px */
--space-44: 22rem;   /* 336px */
}




/* Aplicar rhythm vertical */
body {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  overflow-x: hidden;
  max-width: 100vw;
}

/* Elementos que siguen el rhythm */
h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, pre {
  margin-bottom: var(--vertical-rhythm);
}
.main{
  background-color: rgba(221, 225, 181, 0.222);
  padding-bottom: 1rem;
}

.h1{
  color: var(--color-first);
  font-family: var(--font-roboto-condensed) !important;
}
 /*footer control div */
 .control-container{ 
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto ;
}

.container {
    width: 100%;
    max-width: 100%; 
    margin-inline: auto;
    padding-inline: var(--space-4);
    padding-bottom: 3rem;
}

.h1-section-container{
  padding-top: 2rem ;
  padding-bottom: 1rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.h1-section-container > .h1, .about-ctrl> .h1{
  font-family: var(--font-roboto-condensed);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-black);
  line-height: 2.7rem;
  color: var(--color-dark-green);
  margin-bottom: 1rem;
  text-transform: uppercase;
  margin: 1rem 0 0rem 0;
  padding: 0;
}

.h1-section-container > .h1::first-letter, .about-ctrl> .h1::first-letter{
  font-size: 2.7rem;
  font-weight: var(--font-weight-bold);
}

.h1-description{
  font-family: var(--font-roboto);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-lg);
  line-height: 1.5rem;
  text-align: left;
  text-justify: inter-word; 
  hyphens: auto;
  overflow-wrap: break-word;
  padding: 0;
  margin: 1rem 0 0 0;
}

.section-container{
  padding-top: 2rem ;
  padding-bottom: 1rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}


.section-text {
  font-family: var(--font-roboto);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-lg);
  line-height: 1.5rem;
  text-align: left;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* control div into de .container for main content - text bleedout*/
.inner-main-1{
  padding-top: var(--space-2);
  padding-bottom: var(--space-1);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-inline: auto;
}

@media (widh >= 768px) and (width <1024px) {
  
  .main{
    padding-bottom: 0rem;
  }
  .inner-main-1{
    padding-top: var(--space-2);
    padding-bottom: var(--space-12);
    max-width: 80%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-inline: auto;
  }

  
  .section-container{
    padding-top: 2rem ;
    padding-bottom: 1rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    
}

  .section-text {
    text-align: justify !important;
  }

}

@media (width >= 1024px) {

  .main{
    padding-bottom: 1rem ;
  }
  .inner-main-1{
    padding-top: 0;
    padding-bottom: var(--space-1);
    max-width: 85%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-inline: auto;
  }

  .h1-section-container > .h1, .about-ctrl> .h1{
    font-size: var(--font-size-5xl);
    margin: 3rem 0 1rem 0;
  }

  
  .h1-section-container > .h1::first-letter, .about-ctrl> .h1::first-letter{
    font-size: 3.5rem;
    font-weight: var(--font-weight-bold);
  }
  .section-container{
    padding-top: 2rem ;
    padding-bottom: 2rem;
    overflow: hidden;
    display: flex;
    flex-direction: column
  }

  .section-text {
    text-align: justify !important;
  }

}