@media (min-width: 1024px) { 
  .seccion_proyectos, .seccion_proyectos > .et_pb_row, 
  .seccion_proyectos > .et_pb_row .et_pb_column {
    min-height: calc(100vh - var(--altura_menu));
  }
}

@media (min-width: 980px) { 
  html { 
  scroll-snap-type: y mandatory;
  
  } 
  .et_pb_section {
      scroll-snap-align:start;
    } 
}

html { 
  scroll-behavior: smooth; 
  overscroll-behavior-y: auto !important;
  scroll-padding-top: var(--altura_menu);
}  

@media (max-width: 980px) {
  html {
    scroll-padding-top: var(--altura_menu); 
  }
}

.proyectos_menu { margin-top: var(--margin_large); }

ul.proyectos_lista {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color_gris_claro);
}

/* 1) La FILA actúa como contenedor flex: iguala alturas de columnas */
.fila_proyectos{
  display:flex;
  align-items:stretch;      /* ambas columnas a la misma altura (la del texto marca) */
}

/* 2) Las columnas pueden estirar su contenido */
.fila_proyectos > .et_pb_column{
  display:flex;
  flex-direction:column;
  min-height:0;             /* evita que divi limite el estirado */
}

/* 3) La columna de la imagen se estira siempre, aunque dentro no haya nada */
.columna_imagen{ display:flex; align-items:stretch; min-height:0; }

/* 4) El módulo de imagen rellena toda la columna */
.proyectos_imagen{
  flex:1 1 auto;            /* ocupa todo el alto disponible de la columna */
  overflow:hidden;
  min-height:0;
}

/* 5) Divi envuelve el <img> en un span: que herede la altura */
.proyectos_imagen .et_pb_image_wrap{
  display:block;
  height:100%;
}

/* 6) La imagen se recorta como cover para ocupar SIEMPRE el alto de su contenedor */
.proyectos_imagen img{
  width:100% !important;
  min-width: 100%;
  height:100% !important;   /* clave para ganar a reglas de WP/Divi */
  object-fit:cover;
  object-position:center;
  display:block;
}


.proyectos_destacado h2 {
  min-height: fit-content !important;
}

.proyectos_texto .et_pb_text_inner{
  min-height: calc(8 * 1.2em);
}

.proyectos_item { 
    border-bottom: 1px solid var(--color_azul_verde); 
    list-style: none;
    padding-left: 0;
    min-height: 84px;
    display: flex;
    align-items: center;
    padding-left: var(--margin_small);
    padding-right: var(--margin_small);
}

.proyectos_item:first-of-type {
  border-top: 1px solid var(--color_azul_verde);
}

.proyectos_btn {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--margin_small);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
}

.proyectos_num    { 
    font-family: var(--fuente_titulos);  
    color: var(--color_azul_verde);        
    font-size: var(--size_21); 
}

.proyectos_nombre { 
    font-family: var(--fuente_textos); 
    color: var(--color_gris);  
    font-size: var(--size_21); 
}

.proyectos_flecha {
  width: var(--size_21);
  height: var(--size_21);
  transition: transform .2s ease;
  background: url('../imagenes/arrow_green.svg') no-repeat center;
  background-size: contain;
  padding: var(--padding_small);
}


.proyectos_item.is-active .proyectos_flecha {
  background-image: url('../imagenes/arrow.svg');
}

.proyectos_item.is-active { 
  background-color: var(--color_azul_verde);
}

.proyectos_item.is-active .proyectos_nombre, 
.proyectos_item.is-active .proyectos_num  { 
  color: var(--color_blanco);
}


.proyectos_cta { margin-top: var(--margin_large); }


@media (max-width: 1024px){ 
  #portfolio .columna_imagen , #portfolio .destacado, #portfolio .proyectos_texto   {
    display: none !important;
  }
  .proyectos_item, .proyectos_item.is-active {
    border-bottom: 1px solid var(--color_azul_verde);
    list-style: none;
    padding-left: 0;
    min-height: 84px;
    display: flex;
    align-items: center;
    padding-left: var(--margin_small);
    padding-right: var(--margin_small);
    background-color: transparent;
  }

  .proyectos_nombre, .proyectos_item.is-active .proyectos_nombre{
    font-family: var(--fuente_textos);
    color: var(--color_gris);
    font-size: var(--size_21);
  }

  .proyectos_flecha, .proyectos_item.is-active  .proyectos_flecha {
    width: var(--size_21);
    height: var(--size_21);
    transition: transform .2s ease;
    background: url(../imagenes/arrow_green.svg) no-repeat center;
    background-size: contain;
    padding: var(--padding_small);
  }

  .proyectos_num, .proyectos_item.is-active .proyectos_num{
    font-family: var(--fuente_titulos);
    color: var(--color_azul_verde);
    font-size: var(--size_21);
  }
}