@font-face {
    font-family: 'Ryhmesdisplay';
    src: url('../font/RyhmesDisplay-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ryhmesdisplay';
    src: url('../font/RyhmesDisplay-Italic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Ryhmesdisplay';
    src: url('../font/RyhmesDisplay-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ryhmesdisplay';
    src: url('../font/RyhmesDisplay-MediumItalic.otf') format('opentype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Ryhmesdisplay';
    src: url('../font/RyhmesDisplay-SemiBold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ryhmesdisplay';
    src: url('../font/RyhmesDisplay-SemiBoldItalic.otf') format('opentype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../font/Roboto-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../font/Roboto-Italic.ttf') fformat('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}


.animatable {
  will-change: transform, opacity;
}

/* === General Reset === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Ryhmesdisplay', serif;
  line-height: 1.5;
  background: #FFFBEB;
  overflow-x: hidden;
  color:#153C35;
}

/* text*/
a{
  appearance: none;
  text-decoration: none;
  text-transform: none;
  color: inherit;
}
ul {
  list-style-type: none;
  appearance: none;
  text-decoration: none;
  text-transform: none;
}

h1, h2, h3, h4, h5, h6{
  font-weight:400;
  line-height:115%;
}
p{
  font-size:24px;
  line-height: 130% !important;
}

h1{
  font-size:64px;
}
.h1{
  font-size:64px;
  font-weight:400;
  line-height:110%;
}
.h2, h2{
  font-size:60px;
  font-weight:400;
  line-height:110%;
}
.h3, h3{
  font-size:48px;
  font-weight:400;
  line-height:110%;
}

h4{
  font-size:24px;
}

.small-text{
  font-size:18px;
}

.text-align-center{
  text-align: center;
}
.text-align-right{
  text-align: right;
}

@media (max-width:700px){
  p{
    font-size:18px;
  }
  .h1, h1{
    font-size:48px;
    line-height:110%
  }
  .h2, h2{
    font-size:48px;
    line-height:110%
  }
  .h3, h3{
    font-size:40px;
    line-height:110%
  }

  .small-text{
    font-size:15px;
  }

}

.button{
  appearance: none;
  letter-spacing: 0.5px;
  text-shadow: none;
  text-align: center;
  cursor: pointer;
  border-radius: 50px;
  background-repeat: no-repeat;
  justify-content: center;
  align-items: center;
  column-gap: 1.125rem;
  padding: 1rem 1.75rem;
  display: inline-flex;
  position: relative;
  font-size:15px;
  margin-top:24px;
  font-family: "Roboto" !important;
  font-display: swap;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  letter-spacing:0.2px;
}

@media(max-width:700px){
  .button{
    padding: .65rem 1rem !important;
    font-size:15px !important;
  }
}

.button-full{
  width:100%;
  text-align: center;
  margin-top:12px !important;
}


.button-primary{
  color: #153C35;
  border: 1px solid #FBDE78;
  background-color: #FBDE78;
}

.button-primary:hover{
  background:white;
  border: 1px solid white;
}

.button-white{
  color: #153C35;
  border: 1px solid white;
  background-color: white;
}

.button-white:hover{
  background:#FBDE78;
  border: 1px solid #FBDE78;
}

.button-yellow{
  color:#153C35;;
  border:1px solid #FBDE78;
  background:#FBDE78;
}
.button-yellow:hover{
  color: white;
  border: 1px solid #338961;
  background-color: #338961;
}

.button-outline{
  color:#338961;
  border:1px solid #338961;
  background:transparent;
}

.button-outline:hover{
  color: white;
  border: 1px solid #153C35;
  background-color: #153C35;
}
.button-ouline-white{
  color:white;
  border:1px solid white;
  background:transparent;
}
.button-ouline-white:hover{
  color: white;
  border: 1px solid #153C35;
  background-color: #153C35;
}

.button-secondary{
  color: white;
  border: 1px solid #338961;
  background-color: #338961;
}

.button-secondary:hover{
  color:#338961;
  background:#FBDE78;
  border: 1px solid #FBDE78;
}

.button-dark{
  color: white;
  border: 1px solid #153C35;
  background-color: #153C35;
}

.button-dark:hover{
  color:#153C35;
  background:#FBDE78;
  border: 1px solid #FBDE78;
}

/* Colores */
.dark-green{
  color:#153C35;
}

.light-green{
  color:#338961;
}
.yellow{
  color:#FBDE78;
}
.white{
  color:white;
}

/* only desktop or mobile*/
.only-desktop{
  display:block;
}
.only-mobile{
  display:none;
}

@media (max-width:700px){
  .only-desktop{
    display:none;
  }
  .only-mobile{
    display:block;
  }
}

/* Columnas */
.row{
  display:flex;
  gap:48px;
}
.row--mobile{
  display:flex;
  gap:48px;
}

.align-items-center{
  align-items:center;
}

.col-10{
  width:10%;
}
.col-20{
  width:20%;
}
.col-25{
  width:25%;
}

.col-30{
  width:30%;
}

.col-33{
  width:33%;
}

.col-40{
  width:40%;
}

.col-50{
  width:50%;
}

.col-60{
  width:60%;
}

.col-70{
  width:70%;
}

.col-80{
  width:80%;
}

@media (max-width:700px){
  .row--mobile{
    flex-direction:column;
  }
  .flex-reverse{
    flex-direction:column-reverse !important;
  }
  .mobile-flex{
    flex-direction:column !important;
  }
  .sm-col-50{
    width:48% !important;
  }

  .sm-col-100{
    width:100% !important;
  }
}

img{
  max-width: 100%;
}

/* === NAVBAR === */
.navbar-desktop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20px 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(180deg,rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 100%);
  z-index: 100;
  font-family: 'Ryhmesdisplay', serif;
}

.logo-path{
  fill: white;
}

.navbar-mobile{
    display:none;
  }

.navbar__left,
.navbar__center,
.navbar__right {
  display: flex;
  align-items: center;
}

.navbar__center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* Logo */
.logo {
  height: 36px;
}

/* Links del centro */
.navbar__center .nav-links {
  list-style: none;
  display: flex;
  gap: 40px;
}

.navbar__center .nav-links li a {
  color: #fff;
  text-decoration: none;
  font-weight: 400;
  font-size: 16px;
  transition: color 0.3s;
}

.top-link:hover {
  opacity:0.7;
}

/* Botones de la derecha */
.catalogo-btn {
  background-color: #FBDE78;
  color: #153C35;
  font-weight: 600;
  padding: 10px 24px;
  border-radius: 40px;
  text-decoration: none;
  margin-right: 15px;
  transition: background-color 0.3s ease;
  font-size:14px;
  font-family: "Roboto" !important;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  letter-spacing:0.2px;
}

.catalogo-btn:hover {
  background-color: #153C35;
  color:#FFFBEB;
}

.lang-btn {
  border: 1px solid #fff;
  background: transparent;
  color: white;
  font-weight: 400;
  padding: 8px 12px;
  border-radius: 50%;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
  width:50px;
  height:50px;
  display:flex;
  align-items: center;
}

.lang-btn:hover {
  background-color: #FBDE78;
  border: 1px solid #FBDE78;
  color:#153C35;
}

/* nav dropdowns */
.dropbtn {
  padding: 16px 0;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none; /* Oculto por default */
  position: absolute;
  background-color: #FFFBEB;
  border-top: 4px solid #FBDE78;
  min-width: 200px;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
  margin-top: 5px;
  z-index: 1;
  opacity: 0;
  transform: translateY(10px);
}

.dropdown-content a {
  color: #338961 !important;
  padding: 14px 16px;
  text-decoration: none;
  display: block;
  font-size: 14px !important;
  opacity: 0;
  transform: translateY(10px);
}

.dropdown-content a:hover {
  background-color: #338961;
  color: white !important;
}

.sub-link {
  display: block;
  margin-bottom: 6px;
  color: #333;
  text-decoration: none;
}

.sub-link:hover{
  color:white !important;
}


@media (max-width:999px){
  .navbar-desktop{
    display:none;
  }
  .navbar-mobile {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: linear-gradient(180deg,rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 100%);
    z-index: 999;
  }
  .nav-col-mob{
    display:flex;
    align-items: center;
  }
  .burger{
    color:white;
  }

  .burger, .close-btn {
      background: none;
      border: none;
      font-size: 24px;
      cursor: pointer;
  }
  .close-btn{
    position:absolute;
    right:30px;
    color:#FFFBEB;
  }

  .menu-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.5);
      z-index: 1000;
      opacity: 0; /* en lugar de display: none */
      visibility: hidden;
      transition: none;
  }

  .menu-panel {
      width: 80%;
      height: 100vh;
      background: #153C35;
      color:#FFFBEB;
      position: absolute;
      top: 0;
      left: 0;
      padding: 20px;
      overflow-y: auto;
      transform: translateX(-100%);
      transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1);
      will-change: transform;
  }

  .menu-panel.active { transform: translateX(0); }

  .nav-links { 
    margin-top: 80px;
    list-style: none; 
    padding: 0; 
    color:#FFFBEB;
  }
  .nav-links li { 
    margin: 30px 0; 
    color:#FFFBEB;
    display: block;
  }
  .nav-links a { 
    text-decoration: none; 
    color:#FFFBEB;
    font-size: 18px; 
     color:#FFFBEB;
  }

  /* dropdown menu mobile */
  .navtab {
    position: relative;
    width:98%;
  }
  .navtab input {
    position: absolute;
    opacity: 0;
    z-index: -1;
  }
  .navtab__content {
    max-height: 0;
    overflow: hidden;
    transition: all 0.35s;
  }
  .navtab input:checked ~ .navtab__content {
    max-height: 400px;
    padding-left:5%;
    margin:15px 0 20px 0;
  }

  /* Visual styles */
  .accordion {
    overflow: hidden;
  }
  .navtab__label,
  .navtab__close {
    display: flex;
    color: white;
    cursor: pointer;
  }
  .navtab__label {
    justify-content: space-between;
  }
  .navtab__label::after {
    content: "\276F";
    width: 1em;
    height: 1em;
    text-align: center;
    transform: rotate(90deg);
    transition: all 0.35s;
  }
  .navtab input:checked + .navtab__label::after {
    transform: rotate(270deg);
    margin-left:-10px;
  }
  .navtab label{
    font-size:18px;
    color:#FFFBEB;
  }
  .navtab__content a {
    margin: 0;
    padding: 1rem 0px;
    display:block;
    font-size:18px;
  }
  .navtab__close {
    justify-content: flex-end;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
  }
  .navbar__bottom{
    margin-top:200px;
  }
  .lang-btn{
    margin-top:30px;
  }
  .social-link{
    margin-top:10px;
    color:#FFFBEB;
  }
}




/* === Hero Section === */
.hero {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  overflow: hidden;
  z-index: 1;
}

.hero .bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
}

.hero-carousel {
  z-index: 10;
  position: relative;
}

.carousel-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  width: 700px;
  opacity: 0;
  filter: blur(8px);
  pointer-events: none;
  /* Add hardware acceleration for better performance */
  will-change: opacity, filter, transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.gradient-text {
  position: relative;
  width: fit-content;
  font-weight: 600;
  font-style: italic;
  color: #FBDE78;
}

.gradient-text::after {
  content: "";
  position: absolute;
  background-image: url(../img/underline.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  height: 2em;
  bottom: -7.5rem;
  left: 0px;
}

.button-group {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  pointer-events: auto;
}

.carousel-text h1,
.carousel-text p,
.carousel-text .button-group {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(40px);
  text-shadow: 0px 0px 25px rgba(0,0,0,0.6);
  will-change: opacity, transform, filter;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Mobile styles - Updated breakpoint and forced overrides */
@media (max-width: 700px) {
  .carousel-text {
    width: 400px;
    /* Force override blur on mobile */
    filter: none !important;
    -webkit-filter: none !important;
  }
  
  .carousel-text h1,
  .carousel-text p,
  .carousel-text .button-group {
    opacity: 1 !important;
    filter: none !important;
    -webkit-filter: none !important;
    transform: translateY(0px) !important;
    text-shadow: 0px 2px 8px rgba(0,0,0,0.8); /* Better text readability on mobile */
  }
  
  .button-group {
    align-items: flex-start;
  }
  
  .gradient-text { 
    display: block;
    margin: 0 auto;
    text-align: center;
  }
  
  .gradient-text::after {
    content: "";
    position: absolute;
    background-image: url(../img/underline.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 5em;
    bottom: -15rem;
    left: 0px;
  }
}

@media (max-width: 420px) {
  .carousel-text {
    width: 380px;
    filter: none !important;
    -webkit-filter: none !important;
  }
}

@media (max-width: 400px) {
  .carousel-text {
    width: 360px;
    filter: none !important;
    -webkit-filter: none !important;
  }
}

@media (max-width: 380px) {
  .carousel-text {
    width: 320px;
    filter: none !important;
    -webkit-filter: none !important;
  }
}

@media (max-width: 330px) {
  .carousel-text {
    width: 300px;
    filter: none !important;
    -webkit-filter: none !important;
  }
}

@media (max-width: 310px) {
  .carousel-text {
    width: 280px;
    filter: none !important;
    -webkit-filter: none !important;
  }
}

/* Force focus states for better accessibility */
.carousel-text,
.button-group * {
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* Ensure proper stacking and prevent focus issues */
.hero-carousel {
  isolation: isolate;
}

/* === Sections === */
.section {
  position: relative;
  padding-top:100px;
}
.container{
  max-width:1800px;
  padding:0 5%;
  margin: 0 auto;
}

.container-large{
  max-width:1800px;
  padding:0 2.5%;
  margin: 0 auto;
}

.container-medium{
  max-width:1200px;
  padding:0 5%;
  margin: 0 auto;
}

.container-small{
  max-width:800px;
  padding:0 5%;
  margin: 0 auto;
}

@media (max-width:700px){
  .section {
    padding-top:60px;
  }
}

.subtitle-line{
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  justify-content: space-between;
  gap:12px;
}

.subtitle-small{
  color:#338961;
  font-size:18px;
  width:auto;
}

.subtitle{
  font-size:18px;
  width:auto;
}

.line-sub {
  width: 0%;
  height: 1px;
  background-color: #338961;
  transition: width 1s ease-out;
}


.section .content {
  margin-top:24px;
}

.h2-big{
  font-size:75px;
}

  .text-s2{
    margin-top:24px;
    color: #153C35;
  }

@media (max-width:700px){
  .h2-big{
    font-size:50px;
    line-height:110%;
  }
  .section .text-s2{
    font-size:18px !important;
    padding-right:0%;
  }

  .line-sub {
    
    height: 1px;
    background-color: currentColor;
    transition: width 1s ease-out;
  }

  /*.line-sub.animate {
    width: 75%; 
  }*/

}



/* Sección 3 */
.line-left-right{
  width:0%;
  height:1px;
  background-color: #338961;
  margin-bottom:100px;
  transition: width 1s ease-out;
}

.space-padding-bottom{
  padding-bottom:100px
}

.rect-bg{
  position:absolute;
  margin-top:-24px;
  margin-left:24px;
  z-index:-1;
}
.rect-bg svg{
  width:100%;
  max-width:450px;
}

.rect-bg svg path {
  stroke: #338961;
  stroke-width: 1;
  fill: none;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: none;
  visibility: hidden;
}

#planta .img-border-radius {
  border-radius: 20px;
  max-width: 450px;
  max-height: 500px;
  width:100%;
  height:auto;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(-30px);
}

.section-3-align{
  text-align: right;
}

@media (max-width:700px){
  .section-3-align{
    text-align: center;
  }
  .rect-bg{
    max-width:300px;
    margin-left:0px;
    left: 6%;
    margin-top: -60px;
  }
  .rect-bg svg, #planta .img-border-radius{
    width:100%;
    max-width:300px;
  }
  .margin-space-mobile{
    margin-top:40px;
  }

  .line-left-right{
    margin-bottom:60px;
  }
}


/*Sección 4*/

/*Sección 4 - YOUR ORIGINAL CSS WITH MINIMAL FIXES*/
#scroll-container{
  margin-bottom:-600px;
  position: relative;
  z-index: 100;
}
.scroll-section {
  position: relative;
  min-height:100vh;
}
canvas {
  position: sticky;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  background-color: transparent;
}
.caption {
  position: fixed;  /* KEPT YOUR ORIGINAL FIXED POSITION */
  top: 30%;
  width: 100%;
  text-align: center;
  color: white;
  pointer-events: none;
  z-index: 10;
  text-align:left;
  text-shadow: 0px 0px 25px rgba(0,0,0,0.3);
  opacity: 0;
  filter: blur(8px);
  transform: translateY(30px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease,
    filter 0.8s ease;
  
  /* MINIMAL FIX: Add hardware acceleration to prevent sticking */
  will-change: opacity, transform, filter;
  backface-visibility: hidden;
}
.caption.visible{
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0);
}
.caption h2{
  font-size:92px;
}
.caption p{
  margin-top:48px;
  font-size:30px;
  line-height:100%;
  padding-right:5%;
}
#caption1{
  width:40%;
  left:5%;
}
#caption2{
  width:40%;
  right:0%;
}
.caption-gradient-text{
  position: relative;
  width: fit-content;
  font-weight:600;
  font-style:italic;
  color:#FBDE78;
  margin-left:60px;
}
.caption-gradient-text::after {
    content: "";
    position: absolute;
    background-image: url(../img/underline.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 2em;
    bottom:-11rem;
    left:0px;
}

/* scroll sección nosotros*/
#scroll-container-2{
  margin-bottom:-600px;
  position: relative;
  z-index: 100;
}

#caption1-2{
  width:40%;
  left:5%;
}

#caption2-2{
  width:40%;
  right:0%;
}


@media (max-width:700px){
  .caption {
    bottom: 10%;
    top: inherit;
  }
  #caption1, #caption2{
    width:100%;
    left:inherit;
    right:inherit;
    padding: 0 5%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, 0%);
    text-align:center;
  }
  .caption h2{
    font-size:50px;
  }

  .caption p{
    margin-top:24px;
    font-size:22px;
    padding-right:0;
  }
  .caption-gradient-text{
    margin-left:0;
  }
  #caption1 .caption-gradient-text::after {
    height: 5em;
    bottom:-15.5rem !important;
    left:0px;
  }
  #caption2 .caption-gradient-text::after {
    height: 5em;
    bottom:-15.5rem !important;
    left:0px;
  }
  
  #caption1-2, #caption2-2{
    width:100%;
    left:inherit;
    right:inherit;
    padding: 0 5%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, 0%);
    text-align:center;
  }
 
  #caption1-2 .caption-gradient-text::after {
    height: 5em;
    bottom:-15.5rem !important;
    left:0px;
  }
  #caption2-2 .caption-gradient-text::after {
    height: 5em;
    bottom:-15.5rem !important;
    left:0px;
  }
}




/* PRODUCTS TABS */
#productos{
  padding-top:250px;
}
.row--products {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}
.col-33--products {
  flex: 0 0 33.3333%;
  padding: 0 10px;
  box-sizing: border-box;
}

/* --- Estilos de tabs --- */
.tab-buttons {
  width:100%;
  text-align: center;
  margin: 1rem auto 2rem auto;
}
.tab-btn {
  margin-right: 12px;
  cursor: pointer;
  transition: background 0.2s;
  color:#153C35;
  background: transparent;
  border: 1px solid #153C35;
  padding:20px 27px;
  font-size:18px;
  font-family: 'Ryhmesdisplay';
}
.tab-btn.active {
  color: white;
  border: 1px solid #153C35;
  background-color: #153C35;
}
.tab-btn:hover:not(.active) {
  border: 1px solid #FBDE78;
  background:#FBDE78;
}

/* --- Contenido de tab oculto/visible --- */
.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}

.product{
  width:100%;
  height:500px;
  background:black;
  border-radius:20px;
}

.product-title{
  font-size:24px;
  color:#153C35;
  margin-top:12px;
}

.tag{
  border:1px solid #338961;
  color:#338961;
  padding:4px 5px;
  font-size:10px;
  margin-left:6px;
  border-radius:6px;
  top:-3px;
  position:relative;
}

.tag-white{
  border:1px solid white;
  color:white;
  padding:4px 5px;
  font-size:10px;
  margin-left:6px;
  border-radius:6px;
  top:-3px;
  position:relative;
}

.producto-container-link:hover{
  opacity:0.7;
}

.description--product{
  display: none;
  padding:5% 8%;
  height: 100%;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  text-align: left;
  color:white;
}

.description--product h3{
  font-size:36px;
  color:white;
  margin-bottom:12px;
  font-style:italic;
}

.pr1{
  background:url(../img/maiz-blanco.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.pr1:hover {
  background:#338961;
  border:2px solid #338961;
}

.pr1:hover .description--product{
  display:flex;
}

.pr2{
  background:url(../img/maiz-amarillo.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.pr2:hover{
  background:#338961;
  border:2px solid #338961;
}
.pr2:hover .description--product{
  display:flex;
}
.pr3{
  background:url(../img/maiz-blanco-regular.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.pr3:hover{
  background:#338961;
  border:2px solid #338961;
}
.pr3:hover .description--product{
  display:flex;
}


.pr4{
  background:url(../img/corn-gritz.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.pr4:hover {
  background:#338961;
  border:2px solid #338961;
}

.pr4:hover .description--product{
  display:flex;
}

.pr5{
  background:url(../img/harina-maiz.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.pr5:hover{
  background:#338961;
  border:2px solid #338961;
}
.pr5:hover .description--product{
  display:flex;
}

.pr6{
  background:url(../img/alimento.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.pr6:hover{
  background:#338961;
  border:2px solid #338961;
}
.pr6:hover .description--product{
  display:flex;
}
.row--pp{
  align-items:center;
  justify-content: space-between;
  gap:30px;
}
.cont-productos-personalizados{
  max-width:1034px;
  margin:80px auto 0 auto;
  border:1px solid #338961;
  border-radius: 20px;
  padding:3% 5%;
}
.cont-productos-personalizados .button{
  margin-top:0px 
}

@media (max-width:999px){
  .product{
    width: 100%;
    height:340px;
  }
  .product-title{
    display:block;
  }
  .tag{
    display:block;
    top:0px;
    margin-top:10px;
    margin-left:0px;
    max-width: fit-content;
    padding: 4px;
  }
}

@media (max-width:700px){
  #productos{
    padding-top:150px;
  }
  .row--products{
    display: flex;
    flex-wrap: nowrap;
    margin: 0 -10px;
    overflow-x: scroll;
    flex-direction: row;
    -webkit-overflow-scrolling: touch; /* suaviza el scroll en iOS */
    scrollbar-width: none;
  }
  .row--products::-webkit-scrollbar {
    display: none; /* Safari + Chrome */
  }
  .col-33--products {
    flex: 0 0 45%;
    margin-bottom:40px;
  }
  .product {
    width: 100%;
    height: 250px;
  }
  .tab-buttons{
    margin-top:0px;
    display:flex;
    gap:12px;
  }
  .tab-btn{
    margin-right:0px;
  }
  .pr1:hover {
    background:url(../img/maiz-blanco.jpg);
    border:inherit;
  }
  .pr1:hover .description--product{
    display:none;
  }
  .pr2:hover {
    background:url(../img/maiz-amarillo.jpg);
    border:inherit;
  }
  .pr2:hover .description--product{
    display:none;
  }
  .pr3:hover {
    background:url(../img/maiz-blanco-regular.jpg);
    border:inherit;
  }
  .pr3:hover .description--product{
    display:none;
  }
  .pr4:hover {
    background:url(../img/corn-gritz.jpg);
    border:inherit;
  }
  .pr4:hover .description--product{
    display:none;
  }
  .pr5:hover {
    background:url(../img/harina-maiz.jpg);
    border:inherit;
  }
  .pr5:hover .description--product{
    display:none;
  }
  .pr6:hover {
    background:url(../img/alimento.jpg);
    border:inherit;
  }
  .pr6:hover .description--product{
    display:none;
  }
  .cont-productos-personalizados{
    margin:20px auto 0 auto;
  }
}

/* Sección Trazabilidad HP */
.full-width-img{
  width:100%;
  height:auto;
  margin-bottom:0px;
}
.contenedor-blanco{
  max-width:1448px;
  padding:4% 6%;
  position:relative;
  margin:-200px auto 0 auto;
  width:93%;
  background:white;
  border-radius:20px;
}

.text-green-line{
  position: relative;
  width: fit-content;
  font-weight:600;
  font-style:italic;
  color:#338961;
}

.text-green-line::after {
    content: "";
    position: absolute;
    background-image: url(../img/underline-green.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 2em;
    bottom:-120px;
    left:0px;
}

.hover-green:hover{
  background:#338961;
  color:white;
}

@media (max-width:700px){

  .full-width-img{
    height:380px;
    object-fit: cover;
  }

  .contenedor-blanco{
    max-width:1448px;
    padding:40px 5%;
    margin:-6px auto 0 auto;
    width:100%;
    background:white;
    border-radius:0px;
  }
  .text-green-line::after {
    height: 5em;
    bottom:-245px;
    left:0px;
  }
}

/* NUMBERS ROLLING */
.line-numbers{
  width:100%;
  height:1px;
  background:#338961;
  margin:10px auto;
}

@media (max-width:1080px){
  .rolling-container  .h2-big{
    font-size:60px;
  }
}

@media (max-width:999px){
  .rolling-container  .h2-big{
    font-size:45px;
  }
}

@media (max-width:700px){
  .rolling-container{
    margin-top:40px;
    margin-bottom:40px;
  }

  .rolling-container .h2-big{
    font-size:60px;
  }

}

/* superioridad*/
.align-items-center-desk{
  align-items:center;
}

.full-half-img{
  width:100%;
  height:780px;
  object-fit: cover;
}

.line-sub-half{
  width: 60%;
  height: 2px;
  background-color: #338961;
}
.title-extra-space{
  margin:24px 0
}
.content-space-left{
  padding-left:5%;
}

@media(max-width:1210px){
  .line-sub-half{
    width: 50%;
  }
  .full-half-img{
    width:100%;
    height:680px;
    object-fit: cover;
  }
  .content-space-left{
    padding-left:0;
  }
}

@media(max-width:999px){
  .line-sub-half{
    width: 40%;
  }
  .full-half-img{
    width:100%;
    height:700px;
    object-fit: cover;
  }
}

@media(max-width:700px){
  .line-sub-half{
    width: 50%;
  }
  .full-half-img{
    width:100%;
    height:380px;
    object-fit: cover;
  }
}

/* quotes */
.section-big-padding{
  padding:200px 0;
}
.quotes-container{
  max-width:1386px;
  margin:0 auto;
}

.quote-carousel-text{
  text-align: center;
}


@media (max-width:700px){
  .quote-carousel-text h2{
    font-size:36px;
  }
}


/*CONTACT form*/
.contact-section{
  background:url(../img/bg-contact.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding:130px 0;
  margin-top:100px;
}

#contact h3{
  margin:24px 0;
}
#contact h4{
  width:80%;
  font-size:36px;
}
.content-hours{
  max-width:320px;
  margin-top:24px;
  margin-bottom:24px;
}
.content-hours .col-50{
  margin:6px 0;
}
.form-contacto{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
}
.full-input, .half-input {
  padding:24px 0 10px 0;
  border:none;
  outline: none;
  background:transparent;
  color:white;
  border-bottom:1px solid white;
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  letter-spacing:0.2px;
}
.full-input {
  width:100%;
}

.full-input::placeholder, .half-input::placeholder{
color:white;
}

.half-input{
  width:48%;
}

.form-contacto .button{
  float:right;
}

.row--send{
  display:flex;
  justify-content: flex-end;
  width: 100%;
}

.message-alert {
    padding: 15px 20px;
    margin: 10px 0;
    border-radius: 8px;
    font-weight: 500;
    position: relative;
    animation: slideDown 0.5s ease;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.message-alert.success {
    background: linear-gradient(135deg, #338961, #338961);
    color: white;
}

.message-alert p{
  font-size: 14px !important;
  font-family: 'Roboto';
}

.message-alert.error {
    background: linear-gradient(135deg, #f44336, #d32f2f);
    color: white;
}

.message-alert .close-btn {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.message-alert .close-btn:hover {
    opacity: 1;
}

.message-alert .icon {
    display: inline-block;
    margin-right: 10px;
    font-size: 18px;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-out {
    animation: fadeOut 0.5s ease forwards;
}

@keyframes fadeOut {
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

@media (max-width:700px){
  .contact-section{
    padding:100px 0;
    margin-top:60px;
  }
}


/* Footer */
.section-footer{
  padding-top:60px;
}

.section-footer .h4{
  font-size:24px;
}

.row--footer{
  display:flex;
  gap:48px;
}

.row--footer .col-20{
  display:flex;
  flex-direction: column;
  align-items: center;
}
.footer-blocks{
  text-align:left;
}
.section-footer ul li{
  margin:12px 0;
}
.link-footer{
  font-size:16px;
  color:#153C35;
}

.link-footer:hover{
  color:#338961;
}

.company-name{
  font-size:15px;
  margin-top:80px;
  margin-bottom:24px;
  color:#153C35;
}

@media (max-width:700px){
  .row--footer{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
  }
  .row--footer .col-20{
    align-items:flex-start;
  }
  .section-footer .h4{
    font-size:24px;
    margin-top:12px;
    margin-bottom:24px;
  }
  .section-footer ul li{
    margin:18px 0;
  }

}


/* certificados*/
.certificados{
  margin:100px auto;
  flex-wrap: wrap;
  text-align: center;
}
@media (max-width:700px){
  .certificados{
    margin-top: 60px;
    row-gap: 24px;
    column-gap: 12px;
    flex-wrap: wrap;
    flex-direction: row;
  }
}



/* ============== PAGINAS ============== */

.hero-image{
  display:flex;
  height:800px;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  /* the image will be on each page*/
}

/* Para que inicien con opacidad 0 y opcionalmente blur en desktop */
.hero-image .hero-sub,
.hero-image .hero-title,
.hero-image .button-group {
  opacity: 0;
  filter: blur(8px);
}

@media (max-width: 999px) {
  .hero-image .hero-sub,
  .hero-image .hero-title,
  .hero-image .button-group {
    filter: inherit;
  }
}


.content-hero{
  max-width:800px;
  margin:0 auto;
  text-align:center;
}
.content-hero p, .content-hero, h1{
  color:white;
}

.row--lines-center{
  display:flex;
  align-items: center;
  gap:12px;
}

.line-izquierda, .line-derecha{
  height:1px;
  background:#338961;
  width:100%;
}

.subtitle-inlines{
  color: #338961;
  font-size: 18px;
  width:33%;
  text-align: center;
  min-width: 180px;
}




/* === Origenes === */

.timeline {
  position: relative;
  width: 100%;
  padding: 100px 20px;
}

.timeline-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background-color: #153C35;
  transform: translateX(-50%);
  margin-top: 100px;
}

.timeline-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 100px 0;
  position: relative;
}

.timeline-block {
  width: 45%;
  opacity: 1;
}

.timeline-block h3{
  margin:12px 0 24px 0;
}

.left {
  text-align: right;
  padding-left:10%;
  
}

.right {
  text-align: left;
  padding-right:10%;
}

@media (max-width:999px){
  .timeline{
    padding-left:0;
    padding-right:0;
  }
  .timeline-block h3{
    font-size:28px;
  }
  .timeline-block p{
    font-size:16px;
  }
  .timeline-row{
    margin:60px 0;
  }
  .left {
    padding-left:0;
  }

  .right {    
    padding-right:0;
  }
}


/* Slideshow */
.fullwidth-carousel {
  margin-top:100px;
  position: relative;
  width: 100%;
  height: 70vh;
  overflow: hidden;
}

.carousel-slide {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0; 
  left: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  pointer-events: none;
}

.carousel-slide.active {
  pointer-events: auto;
}

.carousel-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  color: white;
  opacity: 0;
  font-size: 2rem;
  max-width:800px;
  text-align:center;
}

.quotes-success{
  text-shadow: 0px 0px 25px rgba(0,0,0,0.6);
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background:transparent;
  color: white;
  border: none;
  font-size: 2rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  z-index: 10;
}

.carousel-btn.prev {
  left: 10px;
}

.carousel-btn.next {
  right: 10px;
}

@media (max-width:700px){
  .fullwidth-carousel {
    margin-top:60px;
  }
  .carousel-btn.prev, .carousel-btn.next {
    opacity:0;
  }
}

/* nosotros fabrica */
.content-fabrica{
  max-width:1200px;
  margin:0 auto 60px auto;
  text-align:center;
}
.container-fix{
  width:100%;
  height:auto;
}
.row--scroll-right{
  display:flex;
  gap:12px;
  overflow-x:scroll;
  -webkit-overflow-scrolling: touch; /* suaviza el scroll en iOS */
  scrollbar-width: none;
}

.row--scroll-right::-webkit-scrollbar {
  display: none; /* Safari + Chrome */
}

.row--scroll-right img{
  border-radius:20px;
}


/* Pagina Productos general */
/* faq*/

.bg-green-faq{
  background:#338961;
  padding-bottom:100px;
  margin-top: 100px;
}
.row--faq{
  display:flex;
  justify-content: space-between;
  gap:24px;
  margin-bottom:48px;
}
.extra-gap{
  gap:60px !important;
}
.buttons-right-mobile{
  text-align:right;
  justify-content: flex-end;

}

.faq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 60px;
}

.faq-item {
  border-bottom: 1px solid white;
  transition: all 0.3s ease;
}
.faq-item:first-child {
  border-top: 1px solid white;
}

.faq-question {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  font-family: inherit;
  width: 100%;
  text-align: left;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.faq-icon {
  font-size: 24px;
  transition: transform 0.3s ease;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.4s ease;
  color: white;
}
.faq-answer p{
  font-size:18px;
}

.faq-item.open .faq-answer {
  max-height: 300px; /* ajusta según necesidad */
  opacity: 1;
  padding-top:12px;
  padding-bottom: 24px;
}

.faq-item.open .faq-icon {
  transform: rotate(45deg); /* + → – visualmente */
  content: "-";
}


  .faq-item,
  .col-60,
  .col-40 {
    will-change: opacity, transform, filter;
  }


@media (max-width:800px){
  .bg-green-faq{
    margin-top:60px;
  }
  .row--faq{
    flex-direction: column;
    margin-bottom:24px;
  }
  .extra-gap{
    gap:0px !important;
  }
  .buttons-right-mobile{
    text-align:left;
    justify-content: flex-start;
    margin-top:0px;
  }
  .faq-question {
    font-size: 18px;
  }
  .faq-answer p{
    font-size:15px;
  }
  .faq-item,
  .col-60,
  .col-40 {
    will-change: inherit;
  }
}


.row--two-img{
  display:flex;
  justify-content: space-between;
  align-items: stretch;
  flex-direction: row;
}
.bg-white{
  background:White;
}
.flex-center-container{
  height:100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

@media(max-width:700px){
  .flex-center-container{
    padding-top:40px;
    padding-bottom:40px;
  }
}

/* Products */
.product-section{
  display:flex;
  justify-content: space-between;
  align-items: stretch;
  flex-direction: row;
  margin-top:90px;
  gap:0px;
}
.main-tag{
  border:1px solid #C7FAE2;
  background:#C7FAE2;
  color:#153C35;
  padding:4px 5px;
  font-size:10px;
  margin-left:6px;
  border-radius:6px;
  top:-3px;
  position:relative;
  text-align: center;
  width: 70px;
  margin-top:50px;
}

.product-image{
  width:100%;
  object-fit: cover;
  height:800px;
}
.product-main-title{
  color: #153C35;
}

.collpasible-info{
  margin:24px auto;
}

.collapsible-item {
  border-bottom: 1px solid #153C35;
}

.collapsible-item:first-child{
  border-top: 1px solid #153C35;
}

.collapsible-title {
  background: none;
  border: none;
  color: #153C35;
  font-size: 20px;
  font-family: inherit;
  width: 100%;
  text-align: left;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.collapsible-icon {
  font-size: 24px;
  transition: transform 0.3s ease;
  color: #153C35;
}

.collapsible-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.4s ease;
  color: #153C35;
}

.collapsible-content p{
  font-size:18px;
}

.collapsible-item.open .collapsible-content {
  max-height: 300px; /* Ajusta si el contenido es más largo */
  opacity: 1;
  padding-top:12px;
  padding-bottom: 24px;
}

.row--icons-products{
  margin:0 auto;
  display:flex;
}

.flex-icon-gap{
  display:flex;
  gap: 18px;
  align-items: center;
}

@media (max-width:999px){
  .product-section{
    margin-top:60px;
  }
}
@media (max-width:700px){
  .product-section{
    flex-direction:column;
  }
  .product-image{
    height:500px;
  }
  .main-tag{
    margin-left:0px;
    margin-top:24px;
    margin-bottom:6px;
  }
  .collapsible-title {
    font-size: 18px;
  }
  .collapsible-content p{
    font-size:15px;
  }
  .row--icons-products{
    flex-wrap: wrap;
    row-gap: 24px;
    justify-content: space-between;
  }

  .product-fullwidth-promesa{
    margin-top:60px;
  }
  .product-main-title .small-text{
    display:block;
  }

  .small-gap-mobile{
    gap:24px;
  }

  .small-gap-mobile .subtitle-small{
    margin-bottom:12px;
  }
}

.row--aplicaciones{
  margin-top:60px;
  width:100%;
  display:flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap:24px;
}

.row--aplicaciones .col-25{
  width:23%;
}

.item-aplicationes{
  background:white;
  border-radius:20px;
}

.item-aplicationes img{
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.content-aplicaciones{
  margin:24px 12px;
  text-align: center;
}

.content-aplicaciones h3{
  font-size:24px;
  margin-bottom:12px;
}

.content-aplicaciones p{
  font-size:17px;
}

.item-aplicationes-oscuro{
  background:#153C35;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding:12px;
  border-radius: 20px;
}

.item-aplicationes-oscuro h3{
  font-size:24px;
  color:white;
}

.item-aplicationes-oscuro p{
  font-size:17px;
  color:white;
}

.product-testimonials{
  padding-bottom:100px;
}

@media (max-width:700px){
  .row--aplicaciones{
    row-gap:24px;
    column-gap:12px;
  }
  .row--aplicaciones .sm-col-50{
    width: 47% !important;
  }
  .item-aplicationes-oscuro{
    padding:12px 6px;
  }
  .content-aplicaciones h3{
    font-size:20px;
    margin-bottom:12px;
  }
  .content-aplicaciones p {
    font-size: 15px;
  }

  .item-aplicationes-oscuro h3{
    font-size:20px;
    color:white;
  }
  .item-aplicationes-oscuro p{
    font-size:15px;
  }
  .product-testimonials{
    padding:100px 0;
  }
}

/* Página Contacto */
.row--contact{
  display:flex;
  align-items: center;
  justify-content: stretch;
  margin-top:60px;
}
.informacion-contacto{
  padding:100px 0;
  display:flex;
  flex-direction: column;
  justify-content: center;
  height:100vh;
}

.container-contact{
  padding: 0 10%;
}
.subtitle-contacto{
  font-size:22px;
  margin-bottom:12px;
}
.horarios-contacto{
  margin-top:60px;
}
.contact-divider{
  height:1px;
  width:100%;
  margin-top:80px;
  background:#153C35;
}

.small-title{
  font-size:24px;
}

.direcciones-contacto{
  margin-top:80px;
}

.direcciones-contacto p{
  margin-top:30px;
}

.row--socials-contact{
  display:flex;
  align-items: center;
  margin-top:40px;
  margin-bottom:60px;
}

.button-w-icon{
  background:#153C35;
  width:100%;
  color:#FBDE78;
  margin-top:0px;
}

.bg-lightgrey{
  background:#FCFBF6;
}
.bg-darkgreen{
  background:#153C35;
}
.row--icons-scontact{
  display:flex;
  justify-content: flex-end;
  align-items: center;
  gap:24px;
}


.contact-form {
  max-width: 900px;
  margin: auto;
  color: #153C35;
  padding:200px 5% 100px 5%;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 2rem;
}

.form-group {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.full-width {
  flex: 0 0 100%;
}

.contact-form input,
.contact-form textarea {
  border: none;
  border-bottom: 1px solid #153C35;
  padding: 8px 4px;
  font-size: 16px;
  background: transparent;
  outline: none;
  resize: none;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  font-size: 17px;
  color: #153C35;
  font-family: 'Ryhmesdisplay';
  font-weight:400;
}

.contact-select{
  width: 100%;
  border: none !important;
  border-bottom: 1px solid #153C35 !important;
  padding: 8px 4px !important;
  font-size: 16px !important;
  background: transparent !important;
  outline: none !important;
  resize: none !important;
  font-size: 17px !important;
  color: #153C35 !important;
  font-family: 'Ryhmesdisplay' !important;
  font-weight:400 !important;
}

/* Contact Checkbox pagina contacto */
.checkbox-label-contact {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.checkbox-label-contact span{
    font-family: 'Ryhmesdisplay';
}

.checkbox-label-contact input[type="checkbox"] {
    margin-right: 10px;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.products-section-contact {
    animation: slideDown 0.3s ease;
    padding:0px 0px 24px 0px !important;
}

.products-section-contact p{
    font-family: 'Ryhmesdisplay';
    font-size:17px;
    color:black;
}

.product-checkbox-contact span{
    color:black;
    font-family: 'Ryhmesdisplay';
}

.product-checkbox-contact {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.product-checkbox-contact input[type="checkbox"] {
    margin-right: 8px;
}

/* Botón ya definido, puedes solo aplicar clase .submit-button a tu botón */
.submit-button {
  cursor: pointer;
  margin-left: auto;
  display: block;
}

/* CONTACT checkbox flotado */ 
.checkbox-group {
    margin: 15px 0;
}

.checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.checkbox-label span{
    color:white;
    font-size: 13px;
    font-family: 'Roboto';
}


.checkbox-label input[type="checkbox"] {
    margin-right: 10px;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.products-section {
    animation: slideDown 0.3s ease;
    padding:0px 0px 24px 0px !important;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.products-section p{
    font-size: 13px !important;
    font-family: 'Roboto';
}

.product-checkbox span{
    font-size: 13px;
    font-family: 'Roboto';
}
.products-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.product-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.product-checkbox input[type="checkbox"] {
    margin-right: 8px;
}

/* end checkbox */   


@media (max-width:1200px){
  .container-contact{
    padding: 0 5%;
  }
}

@media (max-width:999px){
  .row--socials-contact{
    margin-top: 40px;
    flex-direction:column;
    gap: 40px;
  }
  .row--socials-contact .col-50{
    width:100%;
  }

  .row--icons-scontact {
    justify-content: flex-start;
  }
}

@media (max-width:700px){
  .row--contact{
    flex-direction: column;
  }
  .informacion-contacto {
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
  }

  .contact-form{
    padding:60px 5%;
  }

  .form-row {
    flex-direction: column;
  }

  .form-group {
    flex: 1 1 100%;
  }

  .submit-button {
    width: 100%;
    margin-left: 0;
  }

  .contact-form input::placeholder,
  .contact-form textarea::placeholder {
    font-size: 15px;
  }
}

.mapa-section{
  background:#153C35;
  /*min-height:800px;
  padding-top:0px;*/
  padding-bottom:100px;
}

.map{
  position:relative;
  width:100%;
  /*max-width:1400px;*/
  height:500px;
  margin:0 auto;
/*  top:100px;*/
  border-radius:15px;
}

.map-title{
  margin-top:24px;
}

.map-divider{
  height:1px;
  background:white;
  width:100%;
  margin:12px 0;
}

@media (max-width:700px){
  .mapa-section{
    background:#153C35;
    padding-top:0px;
  }
  .map{
    position:relative;
    width:100%;
    max-width:640px;
    height:400;
    margin:0 auto;
    top:100px;
    border-radius:15px;
  }
}
.section-divider-contact{
  height:200px;
  width:100%;
  background:transparent;
}