:root{
  --guinda-principal: #89223d;
  --guinda-oscuro: #562132;
  --dorado: #cda466;
  --blanco-fondo: #f2f2f2;
  --fuente: white;
  --fuente-hover:#89223d;
  /*Colores Secundarios*/
  --dorado-opacity: rgba(205, 164, 102, 0.5);
  --sombras-guinda:rgba(145, 18, 67, 0.48);
  --sombras-gray:rgba(162, 163, 162, 0.25);
  --S-amarillo: #f9b245;
  --S-verde: #419867;
  --S-azul: #2c5166;
  --S-morado: #482445;
}
  .search-button {
    box-sizing: content-box;
    padding: 7px 15px;
    background-color: var(--fuente-hover); 
    color: white; 
    border: none;
    cursor: pointer;
    border-radius: 10rem;
    font-size: 1rem;
    position: absolute;
    right: 0.6rem;
  }
  .search-button-h {
    box-sizing: content-box;
    padding: 7px 15px;
    background-color: var(--fuente-hover); 
    color: white; 
    border: none;
    cursor: pointer;
    border-radius: 10rem;
    font-size: 1rem;
    position: absolute;
    right: 0.6rem;
  }
  .icon{
    position: absolute;
    left: 0.8rem;
  }
  .search-container{
    width: 100%;
    display: flex;
    align-items: center;
  }
  .search-input {
    padding: 10px;
    font-size: 1rem;
    border: 2px solid #ccc;
    border-radius: 10rem;
    outline: none;
    width: 100%;
    text-align: center;
  }
  .search-input:focus {
    border-color: var(--dorado); /* Cambia el color del borde al enfocar */
  }
  
  .search-button:hover {
    background-color: var(--guinda-principal); /* Oscurece el botón al pasar el mouse */
  }

  .principal-header{
    background-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(205, 164, 102, 0) 100%), url("/assets/theme/recursos home/_DSC3631 copy.jpg");
    background-size: cover;
  }
  
  .imgTramySer{
    height: 7rem;
    max-width: 23rem;
    width: 100%;
  }
  .bar-serch{
    position: absolute;
    display: flex;
  }
  .row-sev{
    width: 100%;
    height: 33%;
  }
  .row-top{
    width: 100%;
    vertical-align: baseline;
  }
  .con-mm{
    width: 100%;
  }