@import url('https://fonts.googleapis.com/css2?family=Delius&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

--cassiopeia-font-family-headings: "Open Sans", sans-serif;
--body-font-size : 1rem !important;

.delius-regular {
  font-family: "Delius", cursive;
  font-weight: 400;
  font-style: normal;
}

body {
    font-family: "Open Sans", sans-serif;
}

h1, h2 {
    font-family: "Open Sans", sans-serif;
}

/* Contenedor principal */
.header {
 /*   display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;*/
    gap: 20px; /* Espacio mínimo entre logo y menú */
    font-family: "Delius", cursive;
}

/* Espacio para el logo: 20% del total o máximo 200px */
.header .navbar-brand {
 /*   flex: 0 0 200px; /* No crece, no se encoge, se mantiene en 200px */
    margin: 0;
}

/* El menú ocupa todo el espacio restante (80%) */
/*.header .container-nav {
    flex: 1; 
    display: flex;
  width:100%;
    min-width: 350px;
    justify-content: flex-end; /* Alinea el menú a la derecha */
/*}*/

/* Ajuste para que el menú interno no se rompa */
/*.header .container-nav .navbar {
    justify-content: flex-end;
}

.header .grid-child {
    width: 0;
}*/

.img-perfil {
  height: 150px;
  width: 150px;
  object-fit: cover; /* Optional: crop instead of stretch */
  margin-left: auto;
  margin-right: auto;
}

.card{
  background-color: #30638d;
}
/*
.blog-item {
  --card-border-width: var(--border-width);
  --card-border-color: #dfe3e7;
  --card-border-radius: var(--border-radius);
  --card-height: ;
  --card-bg: var(--body-bg);
  min-width: 0;
  height: var(--card-height);
  color: var(--body-color);
  word-wrap: break-word;
  background-color: var(--card-bg);
  border: var(--card-border-width) solid var(--card-border-color);
  border-radius: var(--card-border-radius);
  background-clip: border-box;
  text-align: center;
}
*/

.btn-languaje {
  --btn-color: #bcbcbc;
  --btn-bg: #1a1a1a;
  --btn-border-color: #4178ba;
  --btn-hover-color: var(--gray-800);
  --btn-hover-bg: var(--gray-100);
}

div.mod-languages .btn-group {
  margin-top: 1em;
  margin-left: 1rem;
}

@media (min-width: 992px) {
  /* Fuerza a la cabecera a comportarse como un contenedor flexible lineal */
  .header {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }

  /* Mantiene el contenedor de la marca (logo) y el menú juntos */
  .header .navbar-brand, 
  .header .header-navigation {
    flex: 0 1 auto;
  }

  .header .grid-child{
    flex: 0 1 auto;
    width: auto;
    max-width: fit-content
  } 

  /* Obliga a la posición below-top a saltar a una línea completamente nueva */
  .header .container-below-top {
    flex: 0 0 100%;
    margin-top: 1rem; /* Espacio opcional superior */
    max-width: inherit;
  }
  }
}


.container-component > :first-child, .container-sidebar-left > :first-child, .container-sidebar-right > :first-child, .container-component > * + *, .container-sidebar-left > * + *, .container-sidebar-right > * + * {
  margin-top: 0;
}


.container-component > :first-child, .container-sidebar-left > :first-child, .container-sidebar-right > :first-child, .container-component > * + *, .container-sidebar-left > * + *, .container-sidebar-right > * + * {
  margin-top: 0!important;
}

main {
  margin-top: 0!important;
}

.com-content-category-blog{
  margin: 0 2rem;
}
.page-header h1,h2{
  margin: 0 2rem;  
}

a: h2, .h2 {
  font-size: calc(1rem + .5vw);
}

body.wrapper-fluid .site-grid {
  grid-gap: 0;
  grid-template-columns: [full-start]minmax(0,1fr)[main-start]repeat(4,minmax(0,25%))[main-end]minmax(0,1fr)[full-end];
}

.multi_bg_example {
  width: 100%;
  height: 600px;
  background-image:
    url(firefox.png), url(bubbles.png),
    linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position:
    bottom right,
    left,
    right;
  background:
    -moz-linear-gradient(
      to right,
      rgba(30, 75, 115, 1),
      rgba(255, 255, 255, 0)
    ),
    -webkit-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)),
    -ms-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
}

/*nosotros*/
.hex-img{
  margin: 1.5rem !important;
}
.hex-img img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius:50%
  /*clip-path: polygon( 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50% );*/
  /*clip-path: polygon(
    25% 6.7%, 75% 6.7%, 
    100% 50%, 75% 93.3%, 
    25% 93.3%, 0% 50%
  );*/
}

.hex-img-small{
  margin: 1rem !important;
}
.hex-img-small img {
  width: 150px;
  height: 150px;
  object-fit: cover;
    border-radius:50%
/*  clip-path: polygon( 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50% );*/
  /*clip-path: polygon(
    25% 6.7%, 75% 6.7%, 
    100% 50%, 75% 93.3%, 
    25% 93.3%, 0% 50%
  );*/
}

.hex-img-cultivos{
  margin: 0!important;
  background:#deb248;
}

.hex-img-cultivos img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  border-radius:50%
/*  clip-path: polygon( 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50% );*/
}
.hex-img-aqua{
  margin: 0!important;
  background:#4178ba;
}

.hex-img-aqua img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  border-radius:50%
/*  clip-path: polygon( 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50% );*/}

.hex-img-urba{
  margin: 0!important;
  background:#a97c93;
}

.hex-img-urba img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  border-radius:50%
/*  clip-path: polygon( 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50% );*/}

.hex-img-bosq{
  margin: 0!important;
  background:#1c7d21;
}

.hex-img-bosq img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  border-radius:50%
/*  clip-path: polygon( 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50% );*/}

.hexagono {
  width: 250px;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #464646;
  text-align: center;
  box-sizing: border-box;
  padding: 1rem;
  /*background-image: url("/images/general/hexagono-green150.svg");
  background-size: cover;
  background-repeat: no-repeat;*/
  margin: auto;
}

.hexagono-interno {
  z-index: 1;
}

  .description {
  border-radius: 28px;
  background: linear-gradient(134deg, #4178ba 0%, #ffffff 100%);
  box-shadow: 0px 4px 4px rgba(0,0,0,0.25);
    padding:1.5rem;
}

.juego-descripcion {
    background-color: #f4eee6;
    text-align: center;
}

.juego-descripcion-cultivo {
    background-color: #ddb148;
    text-align: center;
}

.juego-colaboradores{
  background-color:#fcfaf7;
    text-align: center;
}
.juego-contacto {
    background-color: #3e73b2;
    color: white;
    text-align: center;
}

.juego-contacto h2{
  color: #dbb047;
}

.juego-contacto a{
  color: #dbb047;
}
.juego-contacto ul{
  text-align: left;
}

section {
    padding: 80px 0;
}

.flex-colaboradores {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

    .lineasdeinvestigacion {
  border-radius: 28px;
/*  background: linear-gradient(134deg, #4178ba 0%, #ffffff 100%);
  box-shadow: 0px 4px 4px rgba(0,0,0,0.25);*/
    padding:1.5rem;
}

  .herramientas {
  overflow: hidden;
  border-radius: 32px;
  background: radial-gradient(75.37% 85.25% at 24.8% 29.33%, #ffffff 41.26%, rgba(255,255,255,0.2) 100%), linear-gradient(90deg, #f0c7ff 0%, #ffe7c0 100%);
  box-shadow: 0px 4px 4px rgba(0,0,0,0.25);
    display: flex;
  margin: 0rem;
  padding: 1rem;
  margin-right: auto;
  margin-left: auto;
}

  .rowHerramientas{
    display: flex;
    }

  .col-header{
    vertical-align: middle;
    display: flex;
  }

.drawingshapes {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  background: radial-gradient(65.59% 74.65% at 26% 39.17%, #ffffff 41.26%, rgba(255,255,255,0.2) 100%), linear-gradient(90deg, #defffc 0%, #ffdee2 100%) ;

}

  .lineas-row {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  background: radial-gradient(35.59% 74.65% at 26% 39.17%, #fff 41.26%, rgba(255,255,255,0.2) 100%), linear-gradient(90deg, #defffc 0%, #ffdee2 100%);
  margin: 0rem;
  padding: 1rem;
}

.contactarea {
  position: relative;
  overflow: hidden;
  margin: 0.5rem; 1rem;
  padding: 1rem;
}

/*nosotros*/

.blog-item .item-image {
  /*margin: 1.5rem;*/
  margin: 0rem;
}

.reglamento-container p{
  text-align: justify;
}


/* imagenes lightbox-contenido*/
/* El contenedor cubre toda la pantalla pero está oculto por defecto (opacity: 0) */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 9999;
}

/* Zona invisible para cerrar haciendo clic fuera de la imagen */
.lightbox-cerrar-zona {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: default;
}

/* El contenedor interno de la imagen */
.lightbox-contenido {
    position: relative;
    max-width: 85%;
    max-height: 85%;
}

.lightbox-contenido img {
    width: 100%;
    height: auto;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.8);
}

/* Botón flotante para cerrar (X) */
.btn-cerrar {
    position: absolute;
    top: -40px;
    right: 0;
    color: white;
    font-size: 35px;
    text-decoration: none;
}

.btn-info {
  width: 100%;
}
/* ¡MÁGIA DE CSS! Cuando el ID está activo en la URL, cambia la opacidad y permite clics */
.lightbox-overlay:target {
    opacity: 1;
    pointer-events: auto;
}
/* imagenes lightbox-contenido*/

footer {
  margin: 0rem!important;
}