body {
  font-family: 'Roboto', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Roboto Slab', serif;
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 34;
}

:root {
  /* Verde Claro - #AED2B6 */
  --color-verde-claro-rgb: 174, 210, 182;

  /* Amarillo - #F9F871 */
  --color-amarillo-rgb: 249, 248, 113;

  /* Naranja - #F07838 */
  --color-naranja-rgb: 240, 120, 56;

  /* Azul Oscuro - #384268 */
  --color-azul-oscuro-rgb: 56, 66, 104;

  /* Gris Oscuro/Negro - #232323 */
  --color-gris-oscuro-rgb: 35, 35, 35;

  /* Teal/Cian - #166A77 */
  --color-verde-azulado-rgb: 22, 106, 119;

  /* Blanco - #FFFFFF */
  --blanco-rgb: 255, 255, 255;
}

h1 {
  font-size: 5rem; /* 96px / 16px = 6rem */
  color: rgba(var(--blanco-rgb), 1);
  font-family: 'Roboto Slab', serif;
  font-weight: 700; /* bold */
  line-height: 1.2;
  text-align: center;
}

@media (max-width: 768px) {
  h1 {
    font-size: 3.4rem; /* 64px / 16px = 4rem */
  }
}

h2 {
  font-size: 2.25rem; 
  color: rgba(var(--blanco-rgb), 1);
  font-family: 'Roboto Slab', serif;
  font-weight: 500; /* bold */
  line-height: 1.2;
  text-align: center;
  margin: 0 0 24px 0;
}

@media (max-width: 768px) {
  h2 {
    font-size: 1.8rem; /* 64px / 16px = 4rem */
  }
}




h1 span {
  display: block;
  font-size: 2.8rem; /* por ejemplo */
}

@media (max-width: 768px) {
 h1 span {
    font-size: 1.9rem; /* 64px / 16px = 4rem */
  }
}

h1::selection {
   background-color: rgba(var(--color-verde-azulado-rgb), 1);
  color: #fff;
}


a.btn-blanco {
  display: block;
  padding: 8px 18px;
  font-size: 1.25rem; /* 20px / 16px = 1.25rem */
  color: rgba(var(--color-gris-oscuro-rgb), 1);
  background-color: rgba(var(--blanco-rgb), 1);
  text-decoration: none; /* Elimina el subrayado por defecto */
  border: 1px solid rgba(var( --color-gris-oscuro-rgb), 1);
  border-radius: 34px; /* 48px / 16px = 24px */ 
  vertical-align: middle;
  height: fit-content;
  transition: 0.3s;
  text-align: center;
  white-space: nowrap;
  margin: 10px 0 0 10px;
}

a.btn-blanco:hover {
  background-color: rgba(var(--color-naranja-rgb), 1);
}

a.btn-blanco:active {
  background-color: #D34C04;
}

a.btn-blanco:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--color-naranja-rgb), 1);
}




@media (max-width: 768px) {
  a.btn-blanco, a.btn-naranja {
    width: 100%;
  }
}

a.btn-naranja {
  display: inline-block;
  padding: 8px 18px;
  font-size: 1.25rem; /* 20px / 16px = 1.25rem */
  color: rgba(var(--color-gris-oscuro-rgb), 1);
  background-color: rgba(var(--color-naranja-rgb), 1);
  text-decoration: none; /* Elimina el subrayado por defecto */
  border: 2px solid rgba(var(--blanco-rgb), 1);
  border-radius: 34px; /* 48px / 16px = 24px */ 
  vertical-align: middle;
  height: fit-content;
  transition: 0.3s;
  text-align: center;
  white-space: nowrap;
  margin-top: 10px;
  font-family: 'Roboto Slab', serif;
}

a.btn-naranja:hover {
  background-color: #D34C04; /* Naranja más oscuro */
  border: 2px solid rgba(var(--blanco-rgb), 1);
}

a.btn-naranja:active {
  background-color: #B94203; /* Naranja aún más oscuro */
  border-color: #B94203;
}

a.btn-naranja:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--color-gris-oscuro-rgb), 1);
}



a.btn-naranja-2 {
  display: inline-block;
  padding: 8px 18px;
  font-size: 1.25rem; /* 20px / 16px = 1.25rem */
  color: rgba(var(--color-gris-oscuro-rgb), 1);
  background-color: rgba(var(--color-naranja-rgb), 1);
  text-decoration: none; /* Elimina el subrayado por defecto */
  border: 2px solid rgba(var(--color-gris-oscuro-rgb), 1);
  border-radius: 34px; /* 48px / 16px = 24px */ 
  vertical-align: middle;
  height: fit-content;
  transition: 0.3s;
  text-align: center;
  white-space: nowrap;
  margin-top: 10px;
  font-family: 'Roboto Slab', serif;
}

a.btn-naranja-2:hover {
  background-color: #D34C04; /* Naranja más oscuro */
  border: 2px solid rgba(var(--color-azul-oscuro-rgb), 1);
}

a.btn-naranja-2:active {
  background-color: #B94203; /* Naranja aún más oscuro */
  border-color: #B94203;
}

a.btn-naranja-2:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--color-gris-oscuro-rgb), 1);
}

a.btn-footer{
  color: white;
  text-decoration:underline;
}

a.btn-footer:hover {
  color:#bfecf3;
}

a.btn-footer:active {
  color: #bfecf3;
}

a.btn-footer:focus {
  outline: none;
  box-shadow: 0 0 0 3px white;
}



.hero-container {
  /* Reemplaza esta URL con la ruta a tu imagen de fondo */
  background-image: url('images/banner_header.webp');

  /* La imagen cubre todo el contenedor sin deformarse */
  background-size: cover;

  /* Centra la imagen en el contenedor */
  background-position: center;

  /* Evita que la imagen se repita */
  background-repeat: no-repeat;

  /* Altura mínima y centrado del contenido (opcional) */
  min-height: 60vh;
  /*display: flex;
  align-items: center;*/
}

.hero-container p {
    color: rgba(var(--blanco-rgb), 1);
    font-size: 1.1rem;
    line-height: 1.5;
    text-align: center;
    font-weight: normal;
     font-family: 'Roboto', sans-serif;
}

.hero-container p::selection {
   background-color: rgba(var(--color-verde-azulado-rgb), 1);
  color: #fff;
}

.container-turquesa {
  background-color: rgba(var(--color-verde-azulado-rgb), 1);
  width: 100%;
  margin: 0;
  padding: 48px 0 84px 0;
}

/* ↓ Desde 992px hacia abajo */
@media (max-width: 992px) {
  .container-turquesa {
    padding: 24px 0;
  }
}
.card-info {
  background-color: rgba(var(--color-verde-azulado-rgb), 1);
  border: 1px solid rgba(var(--color-verde-claro-rgb), 1);
  border-radius: 18px;
  padding: 1rem 0.8rem;
  text-align: center;
  height: 100%; /* ocupa el alto de la col en mobile */
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

/* 🔹 A partir de 992px (lg en Bootstrap) */
@media (min-width: 992px) {
  .card-info {
    min-height: 148px;
  }
}


.card-info h4 {
  font-family: 'Roboto Slab', serif;
  color: rgba(var(--blanco-rgb), 1);
  font-size: 1.125rem; /* 18px */
  margin: 0;
  font-weight: 500;
  text-align: center;
  line-height: 1.3;
}

.card-info p {
  color: rgba(var(--blanco-rgb), 1);
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 3rem; /* 48px */
  line-height: 1.1;
  margin: 0;
  text-align: center;
}

/* Tablet hacia abajo */
@media (max-width: 991.98px) {
  .card-info p {
    font-size: 2.25rem; /* 36px */
  }
}

/* Subclases para card-info con iconos de fondo */
.card-info-1 {
  background-image: url('images/icon-card-1.svg'); /* Reemplaza con la ruta de tu icono 1 */
  background-repeat: no-repeat;
  background-position: right -2px bottom 50%; /* Alineado a la derecha y abajo, con un padding de 1rem */
  background-size: 50px; /* Ajusta el tamaño del icono según sea necesario */
}

.card-info-2 {
  background-image: url('images/icon-card-2.svg'); /* Reemplaza con la ruta de tu icono 2 */
  background-repeat: no-repeat;
  background-position: right -1px bottom 50%;
  background-size: 50px;
}

.card-info-3 {
  background-image: url('images/icon-card-3.svg'); /* Reemplaza con la ruta de tu icono 3 */
  background-repeat: no-repeat;
background-position: right -2px bottom 50%;
  background-size: 60px;
}

.card-info-4 {
  background-image: url('images/icon-card-4.svg'); /* Reemplaza con la ruta de tu icono 4 */
  background-repeat: no-repeat;
  background-position: right -1px bottom 50%;
  background-size: 67px;
}

.card-info-5 {
  background-image: url('images/icon-card-5.svg'); /* Reemplaza con la ruta de tu icono 5 */
  background-repeat: no-repeat;
  background-position: right -1px bottom 50%;
  background-size: 50px;
}

.card-info-6 {
  background-image: url('images/icon-card-6.svg'); /* Reemplaza con la ruta de tu icono 6 */
  background-repeat: no-repeat;
  background-position: right -2px bottom 50%;
  background-size: 66px;
}

.gap-10 {
row-gap: 16px;
}

.container-azul-oscuro {
    background-color: rgba(var( --color-azul-oscuro-rgb), 1);
    width: 100%;
    margin: 0 0 48px 0;
    padding: 48px 0;
      background-image:
    url("/images/textura.webp"),        /* textura con transparencia */
    url("/images/veg1.svg"), /* ilustración izquierda */
    url("/images/veg2.svg"); /* ilustración derecha */

  /* Posiciones de cada imagen (en el mismo orden) */
  background-position:
    center,        /* textura centrada */
    left center,   /* ilustración izquierda abajo */
    right center;  /* ilustración derecha abajo */

  /* Repetición de cada imagen */
  background-repeat:
    repeat,  /* textura se repite */
    no-repeat, /* ilustración izquierda no se repite */
    no-repeat; /* ilustración derecha no se repite */

  /* Tamaño de cada fondo (puede ser distinto para cada uno) */
  background-size:
    auto,     /* textura mantiene tamaño original o se repite */
    auto,    /* tamaño ilustración izquierda */
    auto;    /* tamaño ilustración derecha */

  color: #fff; /* texto blanco, si aplica */
  padding: 3rem 2rem;
}

@media (max-width: 992px) {
  .container-azul-oscuro {
    padding: 2rem 1rem;
  }
}

/* --- Estilos para Pestañas (Tabs) --- */
/* Contenedor general del scroll horizontal */
.tabs-container {
  position: relative;
  overflow: hidden; /* evita que el degradado se salga visualmente */
}

/* Contenedor de tabs */
.tabs-container .nav-tabs {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 24px 0;
  scrollbar-width: none;
  scroll-padding-inline: 1rem;
  gap: 12px;
  border-bottom: none;
  padding-right: 60px; /* 💡 espacio de seguridad para el gradiente derecho */
}

@media (max-width: 992px) {
.tabs-container .nav-tabs {
    gap: 8px;
  }
}

/* Oculta la barra de scroll en navegadores WebKit */
.tabs-container .nav-tabs::-webkit-scrollbar {
  display: none;
}

/* Estado de foco visible y accesible */
.tabs-container .nav-tabs .nav-link:focus-visible {
  outline: 3px solid rgba(var(--color-naranja-rgb), 1);
  outline-offset: 3px;
  z-index: 2;
}

/* Botones de pestañas */
.nav-tabs .nav-link {
  background-color: rgba(var(--blanco-rgb), 1);
  color: rgba(var(--color-gris-oscuro-rgb), 1);
  border: 1px solid rgba(var(--color-gris-oscuro-rgb), 0.2);
  border-radius: 34px;
  margin: 0; /* 🔹 Evita sumas de márgenes que generan desplazamiento */
  white-space: nowrap;
  transition: background-color 0.3s, color 0.3s;
  flex-shrink: 0; /* Evita que se encojan */
}

/* Hover */
.nav-tabs .nav-link:hover {
  background-color: rgba(var(--color-azul-oscuro-rgb), 1);
  border-color: rgba(var(--blanco-rgb), 1);
  color: rgba(var(--blanco-rgb), 1);
}

/* 🔸 Tab activo */
.nav-tabs .nav-link.active {
  background-color: rgba(var(--color-naranja-rgb), 1)!important;
  color: rgba(var(--blanco-rgb), 1);
  border-color: transparent;
  box-shadow: 0px 3px 17px 1px rgba(18, 28, 64, 1);
}

/* 🔸 Foco por teclado (focus visible) */
.nav-tabs .nav-link:focus-visible {
  outline: 2px solid rgba(var(--color-naranja-rgb), 0.8);
  outline-offset: 2px;
}

/* 🔸 Cuando se hace clic (focus normal): sin estilos */
.nav-tabs .nav-link:focus {
  background-color: transparent;
  box-shadow: none;
  outline: none;
}


/* 🔹 Degradados visibles solo hasta 1023px */
@media (max-width: 1023px) {
  .tabs-container::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 100%;
    background: linear-gradient(to right, rgba(61, 66, 93, 0), rgb(45, 50, 80));
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s;
  }

  .tabs-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 100%;
    background: linear-gradient(to left, rgba(61, 66, 93, 0), rgba(61, 66, 93, 1));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
  }

  .tabs-container.show-left-fade::before {
    opacity: 1;
  }
}

/* 🔹 Desde escritorio hacia arriba, centrado y sin degradados */
@media (min-width: 992px) {
  .tabs-container .nav-tabs {
    justify-content: center;
    padding-right: 0;
  }
}

@media (min-width: 1024px) {
  .tabs-container::before,
  .tabs-container::after {
    display: none !important;
  }
}


/*LISTA style*/

/* ==========  LIST ESTILO ========== */
.list-reset {
  list-style: none;
  margin: 0;
  padding: 0;
}

.check-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.check-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.9rem;
  color: white;
}

.check-list li::before {
  content: "";
  background-image: url(images/check-list.svg);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  width: 1rem;
  height: 1rem;
  left: 0;
  top: 0.4rem;
}


.list-square {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list-square li {
  position: relative;
  padding-left:18px;
  margin-bottom: 0.9rem;
  color: white;
}

.list-square li a {
  color: white!important;
}


.list-square li a:visited {
  color: #AED2B6;
}

.list-square li a:hover {
  color: #bfecf3!important;
}


.list-square li a:focus {
 outline: 3px solid #fff;          /* borde blanco bien visible */
  outline-offset: 1px;              /* separa el borde del botón */
  box-shadow: 0 0 0 4px rgba(32, 197, 200, 0.5); /* halo turquesa suave */
}

.list-square li a:active {
  color: #FFFEA8;
}




.list-square li::before {
  content: "";
  background-image: url(images/square.svg);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  width:10px;
  height:10px;
  left: 0;
  top: 0.4rem;
}


.galeria-masonry {
  column-count: 2;
  column-gap: 1.5rem;
  padding: 2rem;
}

.foto {
  margin-bottom: 1.5rem;
  border-radius: 14px;
  overflow: hidden;
  break-inside: avoid;
  transform: translateY(50px);
  opacity: 0;
  transition: all 0.8s ease-out;
}

.foto.visible {
  transform: translateY(0);
  opacity: 1;
}

.foto img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
}

.foto:hover img {
  transform: scale(1.05);
}

@media (max-width: 768px) {
  .galeria-masonry {
    column-count: 1;
  }
}



.footer-style {
  background-color: rgba(var(--color-verde-azulado-rgb), 1);
  color: rgba(var(--blanco-rgb), 1) ;
  font-family: 'Roboto', sans-serif;
  width: 100%;
  margin: 64px 0 0 0;
  padding: 48px 0;
}

.footer-style h1 {
  background-color: rgba(var(--color-verde-azulado-rgb), 1);
  color: rgba(var(--blanco-rgb), 1) ;
  font-family: 'Roboto Slab', serif;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
  margin: 0 ;
  padding: 0 0 22px 0;
  text-align: left;

}

.footer-style a:focus img {
 outline: 3px solid #fff;          /* borde blanco bien visible */
  outline-offset: 1px;              /* separa el borde del botón */
  box-shadow: 0 0 0 4px rgba(32, 197, 200, 0.5); /* halo turquesa suave */
}





.chart-container {
  display: grid;
  grid-template-columns: 1fr 1.2fr; /* texto a la izquierda, gráfico un poco más ancho */
  gap: 3rem; /* aire entre columnas */
  align-items: center; /* centra verticalmente el contenido */
  padding: 1.4rem 3rem; /* aire lateral */
}

.chart-text {
  color: white;
  max-width: 500px;
}



.chart-graphic {
  width: 100%;
  height:; /* ajusta según necesites */
}

/* Responsive: al llegar a md, pasa a una sola columna */
@media (max-width: 992px) {
  .chart-container {
    grid-template-columns: 1fr; /* una sola columna */
    gap: 2rem;
    padding: 2rem 1.5rem;
  }

  .chart-graphic {
    height: 320px;
  }
}


html, body {
  overflow-x: hidden;
}