@font-face {
	/* font-family: 'BlackFriday400';
	src:url('../fonts/BlackFriday400.woff') format('woff'),
		url('../fonts/BlackFriday400.woff2') format('woff2'),
		url('../fonts/BlackFriday400.svg#BlackFriday400') format('svg'),
		url('../fonts/BlackFriday400.eot'),
		url('../fonts/BlackFriday400.eot?#iefix') format('embedded-opentype'),
		url('../fonts/BlackFriday400.ttf') format('truetype');
  
	font-weight: normal;
	font-style: normal;
	font-display: swap; */
  font-family: 'BlackFriday400';
  src: url('../fonts/BlackFriday.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
  
  @font-face {
    /* font-family: 'BarlowCondensed-SemiBold';
    src:url('../fonts/BarlowCondensed-SemiBold.woff') format('woff'),
      url('../fonts/BarlowCondensed-SemiBold.woff2') format('woff2'),
      url('../fonts/BarlowCondensed-SemiBold.svg#BarlowCondensed-SemiBold') format('svg'),
      url('../fonts/BarlowCondensed-SemiBold.eot'),
      url('../fonts/BarlowCondensed-SemiBold.eot?#iefix') format('embedded-opentype'),
      url('../fonts/BarlowCondensed-SemiBold.ttf') format('truetype');
    
    font-weight: normal;
    font-style: normal;
    font-display: swap; */
    font-family: 'BarlowCondensed-SemiBold';
    src: url('../fonts/BarlowCondensed-SemiBold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    /* font-family: 'BarlowCondensed-Light';
    src:url('../fonts/BarlowCondensed-Light.woff') format('woff'),
      url('../fonts/BarlowCondensed-Light.woff2') format('woff2'),
      url('../fonts/BarlowCondensed-Light.svg#BarlowCondensed-Light') format('svg'),
      url('../fonts/BarlowCondensed-Light.eot'),
      url('../fonts/BarlowCondensed-Light.eot?#iefix') format('embedded-opentype'),
      url('../fonts/BarlowCondensed-Light.ttf') format('truetype');
    
    font-weight: normal;
    font-style: normal;
    font-display: swap; */
    font-family: 'BarlowCondensed-Light';
    src: url('../fonts/BarlowCondensed-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    /* font-family: 'din-condensed-bold';
    src:url('../fonts/din-condensed-bold.woff') format('woff'),
      url('../fonts/din-condensed-bold.woff2') format('woff2'),
      url('../fonts/din-condensed-bold.svg#din-condensed-bold') format('svg'),
      url('../fonts/din-condensed-bold.eot'),
      url('../fonts/din-condensed-bold.eot?#iefix') format('embedded-opentype'),
      url('../fonts/din-condensed-bold.ttf') format('truetype');
    
    font-weight: normal;
    font-style: normal;
    font-display: swap; */
    font-family: 'din-condensed-bold';
    src: url('../fonts/din-condensed-bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    /* font-family: 'Cygre-SemiBold';
    src:url('../fonts/Cygre-SemiBold-BF63eeebf60aa18.woff') format('woff'),
      url('../fonts/Cygre-SemiBold-BF63eeebf60aa18.woff2') format('woff2'),
      url('../fonts/Cygre-SemiBold-BF63eeebf60aa18.svg#Cygre-SemiBold-BF63eeebf60aa18') format('svg'),
      url('../fonts/Cygre-SemiBold-BF63eeebf60aa18.eot'),
      url('../fonts/Cygre-SemiBold-BF63eeebf60aa18.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Cygre-SemiBold-BF63eeebf60aa18.ttf') format('truetype');
    
    font-weight: normal;
    font-style: normal;
    font-display: swap; */
    font-family: 'Cygre-SemiBold';
    src: url('../fonts/Cygre-SemiBold-BF63eeebf60aa18.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
  
    
  .nosotros {
    width: 100%;
    /* Imagen de fondo completa */
    background: url('../../images/fondo_nosotros.jpg') no-repeat center center;
    background-size: cover; /* Para que cubra todo el espacio */
    display: flex;         /* 2 columnas flexibles */
    flex-wrap: wrap;       /* Se ajustan en pantallas pequeñas */
    align-items: stretch;  /* Ambas columnas estiradas en altura */
    margin: 0;             /* Asegúrate de que no haya margen extra */
    padding: 0;
  }
  .nosotros .image {
  flex: 1.1;  /* Ocupa más espacio que la parte derecha */
  /*background: url('../../images/nosotros.jpg') no-repeat center center/cover;*/
  min-height: 500px;  /* Alto mínimo para que se luzca la imagen */
  }
  /* Columna derecha nosotros */
  .text-container {
  flex: 1; 
  display: flex;         /* Para alinear internamente text-div y number-div */
  flex-direction: column;
  color: white;
  margin: 0;  
  padding: 0;
  }
  .text-div { 
    background-color: transparent; /* SIN fondo azul #4B557D; */
    font-size: 1.2rem; /* Aquí ajustas el tamaño de letra */
    padding: 50px 40px; /* Ajusta si deseas más o menos espacio */
  }
  /* Regla más específica */
  .text-container .text-div p {
    font-size: 1.6rem; /* El tamaño que desees */
  }
  .text-div h2 {
  color: #E63840;
  font-weight: bold;
  }
  .nosotros .text-container h2 {
  color: #E63840;
  font-weight: bold;
  font-size: 2.5rem; /* El tamaño que desees */
   }

  .number-div {
  background-color: transparent; /* SIN fondo blanco #FFFFFF; */ 
  padding: 55px 60px 55px 60px;
  /* margin-left: -20px; Esto añade espacio en el lado derecho */
  }
  /* Tarjetas de años y clientes */
  .bg-card {
	background-color: #1E3D7A;
	border-radius: 8px;
	padding: 0.05px 8px 8px 8px; 
	max-width: 205px; /* No se ensanchará más allá de 100px */
  }
  .number-card {
  font-family: Cygre-SemiBold;
  color: #E63840;
  font-size: 2.75rem;
  margin: 0;
  line-height: 1.2;
  letter-spacing: 0.03em; /* Ajusta para “estirar” un poco los caracteres */
  }
  .text-card {
    font-family: BarlowCondensed-Light;
    font-size: 1.6rem;
    margin: 0;
    line-height: 1.2;
    letter-spacing: 0.02em;
  }
  /*.row.custom-gutter {
    --bs-gutter-x: -9.5rem; /* Valor menor que 0.25rem 
  }*/
  
  
  .plant-item:after{
  content: '';
  height: 98%;
  width: 6px;
  
  position: absolute;
  left: 0;
  bottom: 0;
  
  background-color: rgba(255, 255, 255, 0.9);
  
  border-radius: 5px;
  }
  .plant-item {
  position: relative;
  overflow: visible; /* Permite que el recuadro se vea fuera del contenedor, ya no hidden */
  text-align: left;
  }
  .plant-info {
  position: absolute;
  bottom: -5px;
  left: 0px;
  background: rgba(255, 255, 255, 1);
  border-radius: 5px;
  font-weight: bold;
  color: #1E3D7A;
  height:35%;
  width: 17.5%;
  display: flex;
  align-items: flex-end; /* ancla el contenido al fondo */
	justify-content: flex-start; /* lo mantiene a la izquierda (por defecto) */
  }
  .plant-info span{
  writing-mode: sideways-lr;
  padding: 20px;
  /* --- Añade o modifica la propiedad font-size --- */
  font-size: 1.3rem; /* <<--- ¡AJUSTA ESTE VALOR! Prueba con 0.8rem, 1.1rem, 12px, 14px, etc. */

  /* Opcional: puedes ajustar otros estilos aquí si es necesario */
  /* font-weight: normal; */ /* Si no lo quieres en negrita */
  /* line-height: 1; */    /* Podría ayudar si el texto se corta verticalmente */
  /* color: #otroColor; */ /* Si quieres cambiar el color azul */
  }
  .plant-number {
  text-align: left !important;
  font-family: Cygre-SemiBold;
  font-size: 2rem;
  color: #E63840;
  font-weight: bold;
  margin-top: -10px; /* Ajusta el valor */
  margin-left: 25px;
  }
  .plant-location {
  font-family: BarlowCondensed-SemiBold;
  position: absolute;
  top: 45px; /* 40px */
  left: 25px;
  font-size: 1.4rem;
  color: #FFFFFF;
  letter-spacing: 0.1em; /* Ajusta este valor según la separación deseada */
  }
  .plants {
  background-color: #303c64;
  /*padding: 60px 0; */
  padding: 60px 0 0 0;
  text-align: center;
  }
  .plants h2 {
  color: #E63840;
  font-weight: bold;
  margin-bottom: 40px;
  font-size: 2.5rem;
  /* Método A: margen izquierdo fijo */
  margin-left: 65px; /* Ajusta este valor según lo que necesites */
  }
  .plant-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;       /* Puedes mantenerlo si quieres espacio entre columnas */
  margin: 0;      /* Asegura que no haya margen extra */
  padding: 0;     /* Si hubiera padding, se elimina */
  }
  .plant-item img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
	margin-top: -10px; /* Desplaza la imagen 20px hacia abajo */
  }
  
  html, body, span, applet, object, iframe, h1, h3, h4, h5, h6, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	font:inherit;
	font-family: BarlowCondensed-SemiBold;
	vertical-align:baseline
  } 
  
  h2{
  font-family: din-condensed-bold;
  }
  
  .text-container{
  font-family: BarlowCondensed-Light;
  }
  
  .text-container p {
  font-size: 1.3rem;
  }
  
  .contact {
  background-color: #4B557D;
  color: white;
  padding: 60px 10% 10px 10%;
  text-align: center;
  }
  .contact h2 {
  color: #E63840;
  font-weight: bold;
  margin-bottom: 40px;
  font-size: 2.5rem;
  /* Método A: margen izquierdo fijo */
  margin-left: 65px; /* Ajusta este valor según lo que necesites */
  
  /* Método B: posición relativa con desplazamiento */
  /* position: relative;
  left: 50px; */
  }
  .contact-form input,
  .contact-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  }
  .contact-form button {
  background-color: #2c3365;
  color: #E63840;
  padding: 10px 20px;
  border: none;
  border-radius: 35px; /* Aumenta este valor si quieres un efecto más ovalado, antes 5px */
  font-size: 1.3rem;
  font-weight: bold;
  cursor: pointer;
  width: 100%;
  }
  .contact-form button:hover {
  background-color: #142F5D;
  }
  .contact-info {
  margin-top: 20px;
  font-size: 1.75rem;
  }
  .contact-form{
  font-family: Cygre-SemiBold;
  background-color: #4B557D;
  }
  .contact-form {
  padding: 20px;
  border-radius: 10px;
  max-width: 600px;
  margin: 0 auto;
  }
  
  ::placeholder {
  color: #E63840 !important;
  padding-left:10px;
  }
  
  .video-section {
  background-color: #ADAFAF;
  padding: 20px;
  text-align: left;
  display: flex;
  align-items: center;
  }
  
  .video-section img {
  width: 55px;
  margin-right: 10px;
  }
  
  .video-section a {
  color: #E63840;
  text-decoration: none;
  letter-spacing: 0.075em;
  }
  
  .video-section a{	
  font-family: BlackFriday400;
  font-size: 1.05rem;
  }
  
  .navbar {
  background-color: white;
  padding: 15px 50px;
  }
  
  .navbar-nav .nav-link:hover {
  color: #E63840;
  }
  .navbar-brand {
  padding-bottom: 0px;
  }
  
  .navbar-brand img {
  width: 55%;
  height: auto;
  }
  .nav-link{
  font-size: 1.3rem;
  letter-spacing: 2px;
	color: #E63840;
  font-family: BlackFriday400;
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
  }
  
  hr{
  width: 70%;
	border-top-width: 4px;
	border-top-style: solid;
	border-top-color: initial;
  color: #E63840;
  opacity: 1;
  margin: 0.25rem 0 1rem 0;
  border-radius: 10px;
  }
  
  .products {
  background-color: #F0F0F0;
  padding: 60px 7.5%;
  text-align: center;
  }
  
  .products h2 {
  color: #E63840;
  font-weight: bold;
  margin-bottom: 40px;
  font-size: 2.5rem;
  /* Método A: margen izquierdo fijo */
  margin-left: 65px; /* Ajusta este valor según lo que necesites */
  
  /* Método B: posición relativa con desplazamiento */
  /* position: relative;
  left: 50px; */
  }
  
  .product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    text-align: left;
  }
  
  .product-item {
  padding: 20px;
  }
  
  .product-title {
  font-size: 1.5rem;
  color: #E63840;
  /* Asigna una altura mínima suficiente para el título más largo */
  min-height: 3em; 
  /* Opcional: si quieres que el texto se quede abajo si sobra espacio */
  display: flex;
  align-items: flex-end;
  margin-bottom: 0;
  letter-spacing: 0.05em; /* Ajusta este valor según la separación deseada */
  }
  
  /* Ajustas el margen del <hr> para que quede pegado o separado según quieras */
  .product-item hr {
  margin-top: 0.5rem;
  margin-bottom: 1rem; 
  }
  
  .product-list{
  font-family: BarlowCondensed-Light;
  color: #344A99;
	font-size: 1rem;
  }
  
  .contact-info{
  font-family: BarlowCondensed-Light;
  text-align: left;
  }
  
  .square-img{
  max-width: 50px; 
  margin-top: -35px;
  position: absolute;
	right: 25px;
  }

  .square-img-language{
  max-width: 40px; 
  margin-top: -70px;
  position: absolute;
	right: 90px;
  }
  
  footer{
  font-family: BarlowCondensed-Light;
  font-size: 1.5rem;
  }
  
  body, html {
  height: 100%;
  margin: 0;
  }
  
  .hero {
  position: relative;
  height: 100vh;
  background: url('../../images/portada.jpg') no-repeat center center/cover;
  }
  .content {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  }
  .logo {
  width: 50%;
  margin-bottom: -55px;
  }
  
  .industries {
  background-color: #F4F5F7;
  padding: 60px 10%;
  text-align: center;
  }
  .industries h2 {
  color: #E63840;
  font-weight: bold;
  margin-bottom: 40px;
  font-size: 2.5rem;
  /* Método A: margen izquierdo fijo */
  margin-left: 65px; /* Ajusta este valor según lo que necesites */
  
  /* Método B: posición relativa con desplazamiento */
  /* position: relative;
  left: 50px; */
  }
  .industry-grid {
  display: grid;
  /* Por defecto, en pantallas pequeñas: 2 columnas */
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  }
  
  /* A partir de 992px (Bootstrap “lg”), 4 columnas */
  @media (min-width: 992px) {
  .industry-grid {
	grid-template-columns: repeat(4, 1fr);
  }
  }
  .industry-item {
  display: flex;                /* Para distribuir imagen y texto en columna */
  flex-direction: column;       
  aspect-ratio: 1 / 1;          /* Hace que el contenedor sea cuadrado */
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  background: white;
  }
  .industry-item::after {
  content: "";
  position: absolute;
  bottom: 39px;   /* Ajusta según donde quieras colocarlo */
  right: 10px;
  width: 5px;
  height: 5px;
  background-color: #E63840; /* El tono de rojo que te piden */
  border-radius: 50%;       /* Lo hace circular */
  }
  .industry-item img {
  width: 100%;
  object-fit: cover;
  flex: 1;              /* Para que la imagen ocupe el espacio vertical disponible */
  display: block;       /* Evita espacios “fantasma” en imágenes inline */
  }  
  .industry-item p {
  margin: 0;
  padding: 0.5rem;
  text-align: left;
  color: #2b55a3;
  font-size: 1.35rem;
  font-weight: bold;
  flex-shrink: 0;  /* Evita que el texto se encoja si no hay espacio */
  letter-spacing: 0.05em; /* Ajusta este valor según la separación deseada */
  }