body{
    font-family: 'Poppins medium';
    padding: 0;
    margin: 0;
}
:root {
  --logo-font-size: 70px; /* 👈 aquí controlas el tamaño */
}

#logo {
  float: left;
  padding: 10px 0;
  width: 600px;
  color: #288E85;
  background-color: #fff;
  font-family: "Poppins ExtraBold";
  font-size: var(--logo-font-size); /* 👈 se aplica la variable */
  text-align: inherit;
}

nav{
    background: #228e85;
}
nav ul{
    padding: 0;
    margin: 0;
}

nav ul li{
    display: inline-block;
    padding: 10px;
}

nav ul li a{
    display: inline;
    color: white;
    padding: 10px;
    text-decoration: none;
}
.carrito{
    float: right;
}

.carrito-active{
    background: white;

}
.carrito-active a{
    color: #228e85;
}

main{
    background-color: white;
    margin-left: 0%;
    margin-right: 0% ;
    width: 75%;
    float: left;
    align-content: center; 
    text-align: center;  
    padding: 0 0;     
}

.articulo{

    background-color: white;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    width: 31%;
  
}
.articulo div{
    background-color:white;
    padding: 5px 0;
    width: 80%;
}
.articulo .imagen img{
    height: 200px;
}

.articulo .titulo{
    font-weight: bold;
    font-family: 'Poppins medium';
    font-size: 1.5rem;
    height: 5rem;
    text-align: center;
}

.articulo .descripcion{
    font-weight: medium;
    font-family: 'Poppins medium';
    font-size: 1.05rem;
    width: 80%;
    height: 14rem;
    text-align: center;
    background-color: white;
}

button{
    border: 0;
    border-radius: 5px;
    background:#228e85;
    cursor: pointer;
    padding: 10px;
    font-family: 'Poppins medium';
    color: white;
}

button .botones{
    font-family: 'Poppins Medium';
    color: white;
}
#carrito-container{
    width: 400px;
    background: #228e85;
    border: solid 1px #000;
    padding: 10px;
    box-sizing: border-box;
    position: fixed;
    right: 0;
    margin-top: 10px;
    display: none;
    
}

#tabla .fila{
    box-sizing: border-box;
    padding: 10px 0;
}

#tabla .fila .imagen{
    display: inline-block;
    width: 100px;
}
#tabla .fila .info{
    box-sizing: border-box;
    font-size: 14px;
    display: inline-block;
    padding-left: 20px;
    vertical-align: top;
    width: 273px;
    color: azure;
}

#tabla .fila .info .nombre{
    font-size: 20px;
    font-weight: bold;
}
#tabla .fila .info .botones{
    padding: 20px 0 0 0;
}

#tabla p{
    font-size: 24px !important;
    text-align: center;
    font-weight: bold;
    color: azure;
}
/* 📱 Adaptaciones responsive */
@media (max-width: 1024px) {
    main {
        width: 75%;
        float: none;

    }

    .articulo {
        width: 40%; /* dos columnas en tablets */
        margin: -2px;
    }

    #carrito-container {
        width: 90%;
        right: 5%;
    }
    :root {
    --logo-font-size: 50px;
  
}
}
 


@media (max-width: 768px) {
    main {
        width: 100%;
        float: none;
    }
    nav ul li {
        display: block;
        text-align: center;
    }

    .carrito {
        float: none;
        display: block;
        text-align: center;
        margin-top: 10px;
    }

    .articulo {
        width: 90%; /* una columna en móvil */
        margin: 10px auto;
    }

    .articulo .imagen img {
        height: auto;
        max-height: 180px;
    }

    #carrito-container {
        position: static;
        margin: 20px auto;
        width: 95%;
    }
     :root {
    --logo-font-size: 32px;
  }
}