/*
#  ·················
#  ··_______________
#  ·/·___/·___/·___/
#  /·/__(__··|__··)·
#  \___/____/____/··
#  ··ITCSS-BEM·········
REGLA: SE ESTA USANDO "ITCSS"
MEDIA QUERY: SE ESTA PONIENDO UNO PARA TODOS LOS ELEMENTOS Y PARA CADA UNO DE LOS COMPONENTES AGURPADAENTE

*/

/* ----------------- SETTINGS ------------------ */

/* ---------- VARIABLES -------------- */
:root{
/* --- colores --- */
--azul-bodegom: #00357E;
--azul-bodegom-lighter: #1387DE;
--azul-bodegom-darker: rgb(2, 41, 60);
--naranja-bodegom: #FF9417;
/* WhatsApp brand dark green — AA+ with white text */
--verde-whatsapp: #075E54;
--verde-whatsapp-hover: #054C44;
--background-color: #FFF;
--text-color-87:rgba(0, 0, 0, 0.87);
--text-color-60:rgba(0, 0, 0, 0.60);
--text-color-40:rgba(0, 0, 0, 0.40);
--text-color-white: #FFF;
/* --- cards (aliases → tokens en app/globals.css) --- */
--card-elevation: var(--card-shadow, 0px 6px 12px rgba(29, 7, 1, 0.12));
--card-border-radius: var(--card-radius, 12px);

/* --- typografia --- */
--font-family:  'Inter', sans-serif;

/* --- spacing --- */
--medida1: 8px;
--medida2: 16px;
--medida3: 24px;
--medida4: 32px;
--medida5: 40px;
}
/* ----------------- TOOLS (MIXINGS) ------------------ */







/* ----------------- GENERIC (Resets, Normalize)------------------ */


::selection {
  background: var(--naranja-bodegom); 
  color: white;
}
::-moz-selection {
  background: var(--naranja-bodegom);
  color: white; 
}

/* -------------------------------------------  */
html, body {
  margin: 0px;
  padding: 0px;
  font-family: var(--font-family);
  background: var(--background-color);
  
}



/* ---------------------- ELEMENTS ------------------ */

/* ------------------ TYPOGRAFIA --- */
/* -----MEDIA-- MOBIL (480PX) --- */
/* --- H1 --- */


h1 {
  margin: 0px;
  padding: 0px;
  font-style: bold;
  font-weight: bold;
  font-size: 30px;
  font-display: swap;
  line-height: 1.333;
  color: var(--text-color-white);
}

h2 {
  margin: 0px;
  padding: 0px;
  font-style: normal;
  font-weight: 600;
  font-size: 28px;
  line-height: 33px;
  color: var(--text-color-87);
}

h3 {
  font-weight: 600;
  font-size: 20px;
  line-height: 1.618;
  margin: 0px;
  padding: 0px;
  color: var(--text-color-87);
}

h4 {
  margin: 0px;
  padding: 0px;

  color: var(--text-color-87);
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 20px;;
}
.h4 {
  margin: 0px;
  padding: 0px;
  color: var(--text-color-87);
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 20px;
}

h5 {
  margin: 0px;
  padding: 0px;
}

p {
  margin: 0px;
  padding: 0px;
  font-style: normal;
  font-size: 16px;
  line-height: 1.618;
  color: var(--text-color-60) ;
}

.subtitle {
  margin: 0px;
  padding: 0px;

  color: var(--text-color-87);
  font-style: normal;
  font-weight: normal;
  font-size: 24px;
  line-height: 1.618;
}

a {
  text-decoration: none;
}


/* ------MEDIA QUERY PARA TODOS LOS ELEMENTOS (UNO PARA TODA LA SECCION--- */
/* ----------- TABLETS 480px --- */
@media screen and (min-width: 480px) {
  h1 {
    margin: 0px;
    padding: 0px;
    font-style: normal;
    font-weight: 600;
    font-size: 42px;
    font-display: swap;
    line-height: 1em;
    color: var(--text-color-white);
  }
}
/* ----------- TABLETS 480px --- */
@media screen and (min-width: 768px) {
  h1 {
    margin: 0px;
    padding: 0px;
    font-style: normal;
    font-weight: 600;
    font-size: 42px;
    font-display: swap;
    line-height: 1em;
    color: var(--text-color-white);
  }
}

/* ------- DESKTOP 1024 --- */
@media screen and (min-width: 1024px) {

  h1 {
    margin: 0px;
    padding: 0px;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    font-size: 76px;
    line-height: 1em;
    color: var(--text-color-white);
  }
  
  h2{ 
    font-weight: 600;
    font-size: 42px;
    line-height: 1.2em;
    color: var(--text-color-87)
  }
  
  
  h4 {
    font-size: 22px;
    color: var(--text-color-87);
  }

  .h4 {
    font-size: 22px;
    color: var(--text-color-87);
}
  
  p {
    margin: 0px;
    padding: 0px;
    font-display: swap;
    font-style: normal;
    font-size: 18px;
    line-height: 1.618;
    color: var(--text-color-60);
  }
  }  

  @media screen and (min-width: 1281px) {

    h1 {
      margin: 0px;
      padding: 0px;
      font-style: normal;
      font-weight: 700;
      font-size: 96px;
      line-height: 1em;
      color: var(--text-color-white);
    }

  }


/* ----------------- OBJECT LAY OUT CLASES 
Objects follow OOCSS (Object Oriented CSS) principles. 
They are small and reusable pieces with no aesthetics 
which can be used in UI composition. Examples are wrappers, 
grids, skins to apply to lists, buttons, inputs, etc. 
In other words: any pattern that is repeated over your 
UI is a potential object candidate. What ITCSS author 
said applies to this layer:------------------ */

 /* --- LAY OUT --- */
 .container {
   
  display: grid;
  /* Keep a single column so Tailwind's .col-* (grid-column) cannot split the page */
  grid-template-columns: minmax(0, 1fr);
  margin-right: auto;
  margin-left: auto;
  padding: var(--medida2);
} 

.container2 {
  border: 16px solid #e8e8e8;
  margin-right: auto;
  margin-left: auto;
  align-items: flex-end;
 ;
} 
.col-12 {
  width: 100%;
  /* Override Tailwind's .col-12 { grid-column: 12 } */
  grid-column: auto;
}

/* Override Tailwind's .col-5 { grid-column: 5 } — legacy uses this as a width utility */
.col-5 {
  grid-column: auto;
}


@media screen and (min-width: 1024px) {

.container {
  max-width: 1200px; 
}  
.container2 {
  max-width: 1200px; 
  
} 

.col-5 {
  width: 58%;
  grid-column: auto;
}



}


/* --- grid 1fr - mb 3fb desktop --- */
.gird_1_3 {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: var(--medida1);
  justify-items: center;
  align-items: center;
  list-style: none;
  padding-inline-start: 0px;
}
.custom-counter li {
  counter-increment: step-counter;
}


.gird_1_3 .item {
  align-self: center;
}
.gird_1_3 h3::before {
  background-color: var(--naranja-bodegom);
  border-radius: 50%;
  color: #FFF;
  content: counter(step-counter);
  display: inline-block;
  font-size: 18px;
  line-height: 1.618em;
  text-align: center;
  top: -.236em;
  width: 1.618em;
  margin-right: .618em;

}
.gird_1_3_img {
  display: grid;
  text-align: center;
  margin: auto;
}
.gird_1_3 .item img{
  display: flex;
  align-self: center;
}
@media screen and (min-width: 834px) {
  .gird_1_3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
  }

  /* --- grid 1fr  - mb 3fb desktop --- */



  /* --- grid-ficios 1fr sm - 3fb m --- */

  .grid_beneficios {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: var(--medida1);
    justify-items: center;
    align-items: center;
    width: 100%;
  }
  .grid_beneficios .center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
  }
  .beneficios_img,
  .grid_beneficios img {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  @media screen and (min-width: 834px) {
    .grid_beneficios {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
    }
    }

/* --- grid-beneficios 1fr sm - 3fb m  --- */

/* --- grid-mapa- 2 columnas en escritorio
PAGINA DE PRODUCTO 
1fr  - mb 1fr 1fr desktop --- */
.grid_product {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: var(--medida1);
  
}
.h3-precio {
  font-size: 22px;
  color: var(--azul-bodegom-lighter);
}

@media screen and (min-width: 768px) {
.grid_product {
  display: grid;
  grid-template-columns: 62% 1fr;
  grid-gap: var(--medida3);
}
.h3-precio {
  font-size: 36px;
  color: var(--azul-bodegom-lighter);
}
}
  


/* --- Product page (bodegas) other page --- */
.a:hover {
  text-decoration: underline;
  
}
 .product_list {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: var(--medida1);
 }
 @media screen and (min-width: 768px) {
  .product_list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: var(--medida3);
  }
}
 /* --- Product list (bodegas) other page --- */

 /* --- grid-mapa- 2 columnas en escritorio
    y una columna en celular  
    1fr  - mb 1fr 1fr desktop --- */
    .grid_1-2 {
      display: grid;
      grid-template-columns: 1fr;
      grid-gap: var(--medida1);
      
      align-items: center;
    }
    @media screen and (min-width: 700px) {
      .grid_1-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: var(--medida3);
      }
      }

 /* --- grid-negocios 1fr sm - 3fb m --- */

  .grid_negocios--imagen {
    order: 1;
  }

  .grid_negocios--texto {
    order: 2;
  }
  

@media screen and (min-width: 834px) {
  
  .grid_negocios--imagen {
    order: 2;
  }

  .grid_negocios--texto {
    order: 1;
  }
  }

/* --- grid-negocios 1fr sm - 2fb desktop --- */

/* --- grid 1fr - mb 3fb desktop --- */
.gird_1_4 {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: var(--medida1);
  justify-items: center;
  align-items: center;
  list-style: none;
  padding-inline-start: 0px;
}
.custom-counter li {
  counter-increment: step-counter;
}


.gird_1_4 .item {
  align-self: center;
}
.gird_1_4 h3::before {
  background-color: var(--naranja-bodegom);
  border-radius: 50%;
  color: #FFF;
  display: inline-block;
  font-size: 18px;
  line-height: 1.618em;
  text-align: center;
  top: -.236em;
  width: 1.618em;
  margin-right: .618em;

}
.gird_1_4_img {
  display: grid;
  text-align: center;
  margin: auto;
}
.gird_1_4 .item img{
  display: flex;
  align-self: center;
}
@media screen and (min-width: 834px) {
  .gird_1_4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  }

  /* --- grid 1fr  - mb 3fb desktop --- */



  /* --- grid-ficios 1fr sm - 3fb m --- */

  .grid_beneficios {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: var(--medida1);
    justify-items: center;
    align-items: center;
    width: 100%;
  }
  .grid_beneficios .center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
  }
  .beneficios_img,
  .grid_beneficios img {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  @media screen and (min-width: 834px) {
    .grid_beneficios {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr ;
    }
    }

/* --- grid-beneficios 1fr sm - 4fb m  --- */
/* ----------------- COMPONENTS ------------------ */


/* --- BOTON --- */
button,
a.btn {
  /* Rectangulo*/
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background-color: var(--naranja-bodegom);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.12);
    border-radius: 20px;
    height: 42px;
    border-width: 0px;
    cursor: pointer;
    padding-right: 32px;
    padding-left: 32px;
    text-decoration: none;
  
  /* texto*/
    font-weight: 700;
    font-family: var(--font-family);
    letter-spacing: 0.03em;
    font-size: 14px;
    line-height: 16px;
    color: var(--text-color-87)
  }

a.btn.w-full {
  width: 100%;
}

/* CTA links as buttons: don't stretch full width in flex parents */
a.btn:not(.w-full) {
  width: fit-content;
  max-width: 100%;
  flex-shrink: 0;
  white-space: nowrap;
}

button.nav-hamburger,
button.nav-hamburger:hover,
button.nav-hamburger:focus,
button.nav-hamburger:focus-visible,
button.nav-hamburger:active {
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: var(--azul-bodegom) !important;
  cursor: pointer;
  flex-shrink: 0;
}

/* Show hamburger only on mobile (overrides md:hidden conflict) */
@media screen and (max-width: 767px) {
  button.nav-hamburger,
  button.nav-hamburger:hover,
  button.nav-hamburger:focus,
  button.nav-hamburger:focus-visible,
  button.nav-hamburger:active {
    display: inline-flex !important;
  }

  nav .container {
    padding-right: 4px !important;
    padding-left: 12px;
  }
}
  
  button a{
    font-style: bold;
    
    font-size: 14px;
    line-height: 16px;
    color: white;
    text-decoration: none;
  }
  
  button:hover,
  a.btn:hover {
    /* Rectangulo*/
    background-color: #e95d00;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.12);
    border-radius: 20px;
    border-width: 0px;
    color: var(--text-color-87);
    text-decoration: none;
  }
  /* --- BOTON whatsapp --- */

.bwhatsapp {
  /* Rectangulo*/
    
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.12);
    border-radius: 20px;
    height: 42px;
    border-width: 0px;
    cursor: pointer;
    padding-right: 0px; 
    padding-left: 0px;
   
  
  /* texto*/
    font-weight: 700;
    font-family: var(--font-family);
    letter-spacing: 0.03em;
    font-size: 14px;
    line-height: 16px;
    color: var(--text-color-87)
  }
  
  .bwhatsapp a{
    font-style: bold;
    
    font-size: 14px;
    line-height: 16px;
    color: white;
    text-decoration: none;
  }
  
  .bwhatsapp:hover {
    /* Rectangulo*/
    background-color: var(--verde-whatsapp-hover);
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.12);
    border-radius: 99px;
    border-width: 0px;
  }
  
.button--secundary,
a.button--secundary {
  background: #FFFFFF;
  border: 2px solid var(--naranja-bodegom);
  box-sizing: border-box;
  border-radius: 180px;
  color: var(--text-color-87);
  text-decoration: none;
 }
 .button--secundary:hover,
 a.button--secundary:hover {
  background: #FFFFFF;
  border: 2px solid var(--naranja-bodegom);
  box-sizing: border-box;
  border-radius: 180px;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.12);
  color: var(--text-color-87);
  text-decoration: none;
 }

.button--call {
  background: var(--azul-bodegom);
  border: 2px solid var(--azul-bodegom);
  box-sizing: border-box;
  border-radius: 180px;
  color: #fff;
}
.button--call:hover {
  background: var(--azul-bodegom-lighter);
  border-color: var(--azul-bodegom-lighter);
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.12);
  color: #fff;
}
.button--whatsapp,
a.button--whatsapp {
  background: var(--verde-whatsapp);
  box-sizing: border-box;
  border-radius: 180px;
  color: #FFF;
  text-decoration: none;
 }
 .button--whatsapp:hover,
 a.button--whatsapp:hover {
  background: var(--verde-whatsapp-hover);
  box-sizing: border-box;
  border-radius: 180px;
  color: #FFF;
  text-decoration: none;
 }
/* --- NAVBAR --- */

nav {
  height: 64px;
  background-color: white;
  box-shadow: var(--card-elevation);
  display: flex;
}

nav ul {
  display: flex;
  text-decoration: none;
  margin: 0px;
  display: grid;
  grid-auto-flow: column;
  grid-gap: 16px;  
}
 
nav li {
  list-style: none;
  display: grid;
  grid-gap: var(--medida2);
}
 
nav li a {
  display: grid;
  grid-gap: 16px;
  font-style: normal;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  display: flex;
  align-items: center;
  text-decoration-line: none;
  color: var(--azul-bodegom);
}
 
nav .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
 
nav .nav_options {
  display: none; 
}

nav li a:hover {
  color:var(--naranja-bodegom);
}

/* ------------------------------------ tablets 768px --- */
@media screen and (min-width: 768px) {
  nav .nav_options {
    display: flex;
  }
}
 

/* --- MAIN SECTION --- */
.main_section {
  position: relative;
  overflow: hidden;
  height: 360px;
  color: white;
  background-color: var(--azul-bodegom-lighter);
}

.main_section__media,
.main_section__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.main_section__img {
  object-fit: cover;
  object-position: center;
}

.main_section > .container {
  position: relative;
  z-index: 1;
}

@media screen and (min-width: 480px) {
  .main_section {
    height: 400px;
  }
}

@media screen and (min-width: 1024px) {
  .main_section {
    height: 88vh;
  }
}

/* --- CARDS --- */
.card {
  display: grid;
  box-shadow: var(--card-shadow, var(--card-elevation));
  border-radius: var(--card-radius, var(--card-border-radius));
  border: 0px solid rgba(0, 0, 0, 0.16);
  transition: var(--card-transition, box-shadow 0.2s ease);
}
/* --- Hacer clickeable la card (a nest a div-)-- */
a.card {
  color: inherit;
  text-decoration: inherit;
}

a.card.disabled,
a.card[disabled] {
  pointer-events: none;
  opacity: .8;
}
.card_img {
  display: block;
  width: 100%;
  max-width: 128px;
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--card-radius-image, var(--card-radius, 12px) var(--card-radius, 12px) 0 0);
}
/* --- a--- */

.card-list .card {
  justify-items: center;
  text-align: center;
}

.card-list picture {
  display: block;
  width: 100%;
}


.card-list{
  display: grid;
  grid-gap: 8px;
  grid-template-columns: 1fr 1fr 
  }

  
 .card--link {
  position: absolute;
  top: 0; 
  left: 0;
  height: 100%; 
  width: 100%;
  z-index: 1;
	opacity: 0;
 }
 

 .card:hover {
  box-shadow: var(--card-shadow-hover, 0px 4px 8px rgba(0, 0, 0, 0.24));
 }


.card--title {
  color: var(--text-color-87);
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
   
}

.card--price {
  color: var(--azul-bodegom-lighter);
  font-style: normal;
  font-weight: 600;
  font-size: 19px;
  line-height: 26px;
}

.card__buttom--round {
  width: 50px;
  height: 50px;
  right: 44px;
  bottom: 740px;
  background-color: var(--naranja-bodegom);
}
 /* --- CARDS --- */

@media screen and (min-width: 1024px) {
  .card-list{
    display: grid;
    grid-gap: 24px;
    grid-template-columns: 1fr 1fr 
    }
}

/* --- NEGOCIOS (SOLUCIONES PARA NEGOCIOS) --- */
.grid_list{
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 32px;
}

@media screen and (min-width: 768px) {
  .grid_list{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 24px;
  }
}
/* --- NEGOCIOS (SOLUCIONES PARA NEGOCIOS) --- */


/* --- Footer --- */
.footer {
  background-color: #333;
  
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  grid-gap: 8px;  
  margin: 0 auto;
  max-width: 100%;
  color: rgba(255, 255, 255, 0.87);
  align-self: auto;
}


.footer__ul--col {
  display: flex;
  text-decoration: none;
  margin: 0px;
  display: grid;
  grid-auto-flow: column;
  grid-gap: 16px;
  padding-inline-start: 0px;
  
}  

.footer__ul--row {
  
  text-decoration: none;
  margin: 0px;
  display: grid;
  grid-auto-flow: row;
  grid-gap: 16px;
  padding-inline-start: 0px;
}  



.footer__grid-item {
  display: grid;
  justify-items: center;
  align-items: center;
}

.footer li {
  list-style: none;
  display: grid;
  line-height: 1.618;
  grid-gap: var(--medida2);
}

.footer a {
  display: grid;
  grid-gap: 16px;
  font-style: normal;
  
  line-height: 24px;
  display: flex;
  align-items: center;
  text-decoration-line: none;
  color: rgba(255, 255, 255, 0.80);
}

.footer a:hover {
  color: var(--naranja-bodegom);
}
.footer--ul {
  padding-inline-start: 0px;
  margin-bottom: var(--medida1);
}

.footer--ul:before{
  content:attr(aria-label);
  font-size:120%;
  font-weight:bold;
  margin-left: 0px;
  
}

@media screen and (min-width: 648px) {
  .footer__lg-ul--row {
    display: flex;
    text-decoration: none;
    margin: 0px;
    display: grid;
    grid-auto-flow: row;
    grid-gap: 16px;
    padding-inline-start: 0px;
  } 
  }  


@media screen and (min-width: 648px) {
  .footer__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr ;
    grid-auto-rows: auto;
    grid-gap: 24px;
    margin: 0 auto;
    max-width: 100%;
    color: white; 
}

.footer__grid-item {
  display: grid;
  justify-items: left;
  align-items: left;
}

}
/* --- Footer --- */


/* --- blog hero --- */
.blog_hero {
  background-color: var(--azul-bodegom-lighter) ;
  background-position: center;
  background-repeat: no-repeat;
  color: rgba(255, 255, 255, 0.9);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  color: white
}

.grid_blog {
  display: grid;
  grid-auto-columns: 1fr;
}

@media screen and (min-width: 1024px) {
  .grid_blog {
    display: grid;
    grid-template-columns: 61.8% 1fr ;
  }
}


/* ---BLOG ARTICULE LIST --- */

  article {
    display: block;
    color: currentColor;
}

/* List-style article cards only — do not force block links inside post body */
.grid_blog article a {
  display: block;
  color: currentColor;
}

.grid_blog article a:hover {
  text-decoration: underline;
}

.article__h3 {
  text-decoration: none;


}
.block-link::before {
  bottom: 0;
  content: "";
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}
.meta {
  color: rgba(14,30,37,.54);
  font-size: 14px;
  
  z-index: 1;
}

.post {
  color: rgba(14,30,37,.8);
  font-size: .85rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: auto;
  max-width: 740px;
  word-break: break-word;
}
.post h1 {
  color: var(--text-color-87);
  margin-bottom: var(--medida4);
}

@media screen and (min-width: 1024px) {
  .post h1 {
    font-size: 46px;
  }
}
.post img {
  width: 100%;
}

.post ol {
  padding-inline-start: 0px;
  list-style: none;
}


/* ----------------- UTILITIES ------------------ */
/* lo que hace que el navbar se quede hasta arriba*/


.border-radius {
  border-radius: 30px;
}

.border-radius-card {
  border-radius: var(--card-radius-image, var(--card-radius, 12px) var(--card-radius, 12px) 0 0);
}

.img-100 {
  width: 100%;
  line-height: 0;
  border-radius: var(--card-radius-image, var(--card-radius, 12px) var(--card-radius, 12px) 0 0);
}
.center {
  text-align: center;
  margin: auto;
 }

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
 
.red {
  background-color: #de4039;
}

.yellow {
  background-color: yellow;
}

/* --- TEXT COLOR --- */
.text-color-white {
  color: var(--text-color-white);
}

.text-color-87 {
  color: var(--text-color-87);
}
.text-color-60 {
  color: var(--text-color-60);
}

.text-color-white-87 {
  color: rgba(255, 255, 255, 0.87);
}
.text-color-light-blue {
  color: var(--azul-bodegom-lighter);
}

/* --- MARGINS --- */
.mt-1 {
  margin-top: var(--medida1);
}
.mt-4 {
  margin-top: var(--medida4);
}

.mb-1 {
  margin-bottom: var(--medida1);
}

.mb-2 {
  margin-bottom: var(--medida2);
}

.mb-3 {
  margin-bottom: var(--medida3);
}
.mb-3 .important{
  margin-bottom: var(--medida3);
}
.mb-4 {
  margin-bottom: var(--medida4);
}

.mb-5 {
  margin-bottom: var(--medida5);
}

.mt-4 {
  margin-top: var(--medida4);

}.ml-3 {
  margin-left: var(--medida3);
}
.mr-3 {
  margin-right: var(--medida3);
}


 /* ------------------------------------ tablets 1024 --- */
@media screen and (min-width: 768px) {

  .hidde-desktop {
   display: none;
  }
  
 } 
/* ------------------------------------ tablets 1024 --- */
@media screen and (min-width: 1024px) {

  .mb-lg-100 {
   margin-bottom: 100px;
  }
  .mt-lg-100 {
    margin-top: 100px;
  }
 }
 
   
 

/* --- PADDINGS --- */
.p-0 .important {
  padding: 0px;
}
.p-1 {
  padding: var(--medida1);
}
.pb-1 {
  padding-bottom: var(--medida1);
}

.p-2 {
  padding: var(--medida2);
}
.p-3 {
  padding: var(--medida3);
}

.pt-4 {
  padding-top: var(--medida4);
}

.pb-4 {
  padding-bottom: var(--medida4);
}

.pl-1 {
  padding-left: var(--medida1);
}
.pr-1 {
  padding-right: var(--medida1);
}

.pt--contener {
  padding-top: 72px; 
}
.pb--contener {
  padding-bottom: 72px; 
}

/* --- DISPLAY SETTINGS 
.center {
  margin: auto;
}--- */

.d-flex-row {
  display: flex;
  flex-direction: row;
}

.d-flex-row__bottom {
  align-content: flex-end;
  flex-wrap: wrap;
  align-items: flex-end;
}

.d-flex-row__center {
  align-content: flex-end;
  flex-wrap: wrap;
  align-items: center;
}

.d-flex {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.flex-bottom {
  
  align-items: flex-start;
  justify-content: flex-end;
}
.interlineado-0 {
line-height: 1;
}

/* --- float buttom whatsapp --- */
.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:72px;
	right:16px;
	background-color:var(--verde-whatsapp);
	color:#FFF;
	border-radius:50px;
	text-align:center;
  font-size:30px;
	box-shadow:  0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  transition: 3s; 
  z-index:100;
}

.my-float{
	margin-top:16px;
}


/* --- icons style --- */
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 ;
  font-size: inherit;
  line-height: 1.8;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;

}
.ui-widget-header {
  background: #FFFFFF ;
}
/* --- NABBAR DEABAJO active nav bar option bottom navbar style --- */

.nav {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 56px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  background-color: #ffffff;
  display: flex;
  overflow-x: auto;
}

.nav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  min-width: 50px;
  overflow: hidden;
  white-space: nowrap;
  font-family: sans-serif;
  font-size: 13px;
  color: #444444;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.1s ease-in-out;
}

.nav__link:hover {
  background-color: #eeeeee;
}

.nav__link--active {
  color: #1387DE;
}
.nav__link--active svg {
  fill: #1387DE;
}

.nav__icon {
  font-size: 18px;
}

/* ------- DESKTOP 1024 --- */
@media screen and (min-width: 1024px) {
  .nav {
      display: none;
  }
}

.hidde-movil {
  display: none;
}
/* ------- utility hide --- */
@media screen and (min-width: 768px) {
  .hidde-movil {
      display: block;
  }
}