.elementor-3528 .elementor-element.elementor-element-0cc21a0 > .elementor-container > .elementor-column > .elementor-widget-wrap{align-content:center;align-items:center;}.elementor-3528 .elementor-element.elementor-element-0cc21a0 > .elementor-background-overlay{background-image:url("https://rocknhopz.com/wp-content/uploads/2022/12/5f0ffc5e99a328cfa5b6774e_Home-Page-Background-A.jpg");opacity:0.5;}.elementor-3528 .elementor-element.elementor-element-0cc21a0{padding:0% 0% 0% 0%;}.elementor-3528 .elementor-element.elementor-element-3979ba2 > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:0% 15% 0% 10%;}.elementor-3528 .elementor-element.elementor-element-3979ba2 > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-3528 .elementor-element.elementor-element-e3db8da{margin-top:0px;margin-bottom:0px;}.elementor-3528 .elementor-element.elementor-element-9e1d0c8 > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute){--kit-widget-spacing:50px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );text-transform:var( --e-global-typography-primary-text-transform );font-style:var( --e-global-typography-primary-font-style );text-decoration:var( --e-global-typography-primary-text-decoration );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );color:var( --e-global-color-primary );}.elementor-3528 .elementor-element.elementor-element-f727471{width:auto;max-width:auto;top:-30px;--e-transform-origin-x:center;--e-transform-origin-y:center;}body:not(.rtl) .elementor-3528 .elementor-element.elementor-element-f727471{left:-25px;}body.rtl .elementor-3528 .elementor-element.elementor-element-f727471{right:-25px;}.elementor-3528 .elementor-element.elementor-element-f727471 .elementor-heading-title{font-family:var( --e-global-typography-d632ab2-font-family ), Sans-serif;font-size:var( --e-global-typography-d632ab2-font-size );font-weight:var( --e-global-typography-d632ab2-font-weight );text-transform:var( --e-global-typography-d632ab2-text-transform );font-style:var( --e-global-typography-d632ab2-font-style );text-decoration:var( --e-global-typography-d632ab2-text-decoration );line-height:var( --e-global-typography-d632ab2-line-height );letter-spacing:var( --e-global-typography-d632ab2-letter-spacing );color:#778C60;}.elementor-3528 .elementor-element.elementor-element-42edb65 .elementor-heading-title{font-family:var( --e-global-typography-2df75fd-font-family ), Sans-serif;font-size:var( --e-global-typography-2df75fd-font-size );font-weight:var( --e-global-typography-2df75fd-font-weight );text-transform:var( --e-global-typography-2df75fd-text-transform );font-style:var( --e-global-typography-2df75fd-font-style );text-decoration:var( --e-global-typography-2df75fd-text-decoration );line-height:var( --e-global-typography-2df75fd-line-height );letter-spacing:var( --e-global-typography-2df75fd-letter-spacing );}.elementor-3528 .elementor-element.elementor-element-348b010 .elementor-heading-title{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );text-transform:var( --e-global-typography-secondary-text-transform );font-style:var( --e-global-typography-secondary-font-style );text-decoration:var( --e-global-typography-secondary-text-decoration );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );color:var( --e-global-color-2751a0c );}.elementor-bc-flex-widget .elementor-3528 .elementor-element.elementor-element-d59e554.elementor-column .elementor-widget-wrap{align-items:space-between;}.elementor-3528 .elementor-element.elementor-element-d59e554.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:space-between;align-items:space-between;}.elementor-3528 .elementor-element.elementor-element-d59e554 > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute){--kit-widget-spacing:0px;}.elementor-3528 .elementor-element.elementor-element-d59e554 > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-3528 .elementor-element.elementor-element-d59e554 > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );text-transform:var( --e-global-typography-text-text-transform );font-style:var( --e-global-typography-text-font-style );text-decoration:var( --e-global-typography-text-text-decoration );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-3528 .elementor-element.elementor-element-5414636{width:100%;max-width:100%;background-color:var( --e-global-color-1fc58ae );text-align:center;}.elementor-3528 .elementor-element.elementor-element-5414636 img{height:63vh;object-fit:cover;object-position:center center;}.elementor-3528 .elementor-element.elementor-element-1ed0dde{--display:flex;}.elementor-3528 .elementor-element.elementor-element-1f65333{--display:grid;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(8, 1fr);--grid-auto-flow:row;}.elementor-3528 .elementor-element.elementor-element-7b91e52{--display:flex;}.elementor-3528 .elementor-element.elementor-element-1ce974b{--display:flex;}.elementor-3528 .elementor-element.elementor-element-d5f24de{--display:grid;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--grid-auto-flow:row;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );text-transform:var( --e-global-typography-accent-text-transform );font-style:var( --e-global-typography-accent-font-style );text-decoration:var( --e-global-typography-accent-text-decoration );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-3528 .elementor-element.elementor-element-2115b7d .elementor-button{border-radius:30px 30px 30px 30px;padding:11px 11px 11px 11px;}.elementor-3528 .elementor-element.elementor-element-2b5ddbb{width:var( --container-widget-width, 94.971% );max-width:94.971%;--container-widget-width:94.971%;--container-widget-flex-grow:0;}.elementor-3528 .elementor-element.elementor-element-2b5ddbb.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-3528 .elementor-element.elementor-element-2b5ddbb .elementor-button{border-radius:30px 30px 30px 30px;padding:11px 11px 11px 11px;}.elementor-3528 .elementor-element.elementor-element-c684f39 .elementor-button{border-radius:30px 30px 30px 30px;padding:11px 11px 11px 11px;}.elementor-3528 .elementor-element.elementor-element-46933f5 .elementor-button{border-radius:30px 30px 30px 30px;padding:11px 11px 11px 11px;}.elementor-3528 .elementor-element.elementor-element-0891651 .elementor-button{border-radius:30px 30px 30px 30px;padding:11px 11px 11px 11px;}.elementor-3528 .elementor-element.elementor-element-19a4c8a .elementor-button{border-radius:30px 30px 30px 30px;padding:11px 11px 11px 11px;}.elementor-3528 .elementor-element.elementor-element-4209a8a .elementor-button{border-radius:30px 30px 30px 30px;padding:11px 11px 11px 11px;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-3528 .elementor-element.elementor-element-3979ba2{width:39.973%;}.elementor-3528 .elementor-element.elementor-element-d59e554{width:60.004%;}}@media(max-width:1024px) and (min-width:768px){.elementor-3528 .elementor-element.elementor-element-3979ba2{width:100%;}.elementor-3528 .elementor-element.elementor-element-d59e554{width:100%;}}@media(max-width:1024px){.elementor-3528 .elementor-element.elementor-element-3979ba2 > .elementor-element-populated{padding:10% 15% 10% 15%;}.elementor-3528 .elementor-element.elementor-element-9e1d0c8 > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute){--kit-widget-spacing:30px;}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-3528 .elementor-element.elementor-element-f727471{top:-15px;}.elementor-3528 .elementor-element.elementor-element-f727471 .elementor-heading-title{font-size:var( --e-global-typography-d632ab2-font-size );line-height:var( --e-global-typography-d632ab2-line-height );letter-spacing:var( --e-global-typography-d632ab2-letter-spacing );}.elementor-3528 .elementor-element.elementor-element-42edb65 .elementor-heading-title{font-size:var( --e-global-typography-2df75fd-font-size );line-height:var( --e-global-typography-2df75fd-line-height );letter-spacing:var( --e-global-typography-2df75fd-letter-spacing );}.elementor-3528 .elementor-element.elementor-element-348b010 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-3528 .elementor-element.elementor-element-5414636 img{width:70%;height:30vh;}.elementor-3528 .elementor-element.elementor-element-1f65333{--grid-auto-flow:row;}.elementor-3528 .elementor-element.elementor-element-d5f24de{--grid-auto-flow:row;}.elementor-widget-button .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );}}@media(max-width:767px){.elementor-3528 .elementor-element.elementor-element-3979ba2 > .elementor-element-populated{padding:15% 8% 15% 8%;}.elementor-3528 .elementor-element.elementor-element-9e1d0c8 > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute){--kit-widget-spacing:20px;}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}body:not(.rtl) .elementor-3528 .elementor-element.elementor-element-f727471{left:-10px;}body.rtl .elementor-3528 .elementor-element.elementor-element-f727471{right:-10px;}.elementor-3528 .elementor-element.elementor-element-f727471{top:-10px;}.elementor-3528 .elementor-element.elementor-element-f727471 .elementor-heading-title{font-size:var( --e-global-typography-d632ab2-font-size );line-height:var( --e-global-typography-d632ab2-line-height );letter-spacing:var( --e-global-typography-d632ab2-letter-spacing );}.elementor-3528 .elementor-element.elementor-element-42edb65 .elementor-heading-title{font-size:var( --e-global-typography-2df75fd-font-size );line-height:var( --e-global-typography-2df75fd-line-height );letter-spacing:var( --e-global-typography-2df75fd-letter-spacing );}.elementor-3528 .elementor-element.elementor-element-348b010 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-3528 .elementor-element.elementor-element-1f65333{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-3528 .elementor-element.elementor-element-567978a{border-radius:15% 15% 15% 15%;}.elementor-3528 .elementor-element.elementor-element-577dee3{border-radius:15% 15% 15% 15%;}.elementor-3528 .elementor-element.elementor-element-b7e1bd6{border-radius:15% 15% 15% 15%;}.elementor-3528 .elementor-element.elementor-element-dc8eb27{border-radius:15% 15% 15% 15%;}.elementor-3528 .elementor-element.elementor-element-bd9733a{border-radius:15% 15% 15% 15%;}.elementor-3528 .elementor-element.elementor-element-14c852e{border-radius:15% 15% 15% 15%;}.elementor-3528 .elementor-element.elementor-element-bc4b6e2{border-radius:15% 15% 15% 15%;}.elementor-3528 .elementor-element.elementor-element-d58496f{border-radius:15% 15% 15% 15%;}.elementor-3528 .elementor-element.elementor-element-9aca3be{border-radius:15% 15% 15% 15%;}.elementor-3528 .elementor-element.elementor-element-d969632{border-radius:15% 15% 15% 15%;}.elementor-3528 .elementor-element.elementor-element-7963407{border-radius:15% 15% 15% 15%;}.elementor-3528 .elementor-element.elementor-element-27105b0{border-radius:15% 15% 15% 15%;}.elementor-3528 .elementor-element.elementor-element-3c7b7cc{border-radius:15% 15% 15% 15%;}.elementor-3528 .elementor-element.elementor-element-9b29790{border-radius:15% 15% 15% 15%;}.elementor-3528 .elementor-element.elementor-element-83a1b04{border-radius:15% 15% 15% 15%;}.elementor-3528 .elementor-element.elementor-element-8e8ccd2{border-radius:15% 15% 15% 15%;}.elementor-3528 .elementor-element.elementor-element-280c384{border-radius:15% 15% 15% 15%;}.elementor-3528 .elementor-element.elementor-element-7ad121b{border-radius:15% 15% 15% 15%;}.elementor-3528 .elementor-element.elementor-element-5684f00{border-radius:15% 15% 15% 15%;}.elementor-3528 .elementor-element.elementor-element-8e5abd4{border-radius:15% 15% 15% 15%;}.elementor-3528 .elementor-element.elementor-element-a9784ce{border-radius:15% 15% 15% 15%;}.elementor-3528 .elementor-element.elementor-element-fc9b7bb{border-radius:15% 15% 15% 15%;}.elementor-3528 .elementor-element.elementor-element-5514600{border-radius:15% 15% 15% 15%;}.elementor-3528 .elementor-element.elementor-element-8c79fe4{border-radius:15% 15% 15% 15%;}.elementor-3528 .elementor-element.elementor-element-250b779{border-radius:15% 15% 15% 15%;}.elementor-3528 .elementor-element.elementor-element-c9be17f{border-radius:15% 15% 15% 15%;}.elementor-3528 .elementor-element.elementor-element-fab5d28{border-radius:15% 15% 15% 15%;}.elementor-3528 .elementor-element.elementor-element-88ddb5d{border-radius:15% 15% 15% 15%;}.elementor-3528 .elementor-element.elementor-element-a6570f4{border-radius:15% 15% 15% 15%;}.elementor-3528 .elementor-element.elementor-element-e611bd9{border-radius:15% 15% 15% 15%;}.elementor-3528 .elementor-element.elementor-element-0b610de{border-radius:15% 15% 15% 15%;}.elementor-3528 .elementor-element.elementor-element-fc1e930{border-radius:15% 15% 15% 15%;}.elementor-3528 .elementor-element.elementor-element-d5f24de{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-widget-button .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-3528 .elementor-element.elementor-element-2115b7d .elementor-button{border-radius:30px 30px 30px 30px;}.elementor-3528 .elementor-element.elementor-element-2b5ddbb .elementor-button{border-radius:30px 30px 30px 30px;}.elementor-3528 .elementor-element.elementor-element-c684f39 .elementor-button{border-radius:30px 30px 30px 30px;}.elementor-3528 .elementor-element.elementor-element-46933f5 .elementor-button{border-radius:30px 30px 30px 30px;}.elementor-3528 .elementor-element.elementor-element-0891651 .elementor-button{border-radius:30px 30px 30px 30px;}.elementor-3528 .elementor-element.elementor-element-19a4c8a .elementor-button{border-radius:30px 30px 30px 30px;}.elementor-3528 .elementor-element.elementor-element-4209a8a .elementor-button{border-radius:30px 30px 30px 30px;}}/* Start custom CSS for section, class: .elementor-element-0cc21a0 *//* Estilos generales de la tarjeta */
.beer-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    max-width: 300px;
    margin: 20px auto;
    font-family: 'Arial', sans-serif;
    position: relative;
    cursor: pointer; /* Hace que la tarjeta sea clickeable */
}

/* Nota de cata oculta por defecto */
.tasting-notes {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 15px;
    border-radius: 8px;
    font-size: 1em;
    display: none; /* Se oculta hasta que se haga clic */
    max-width: 1950px;
    text-align: center;
    z-index: 10;
}

/* Mostrar popup cuando la tarjeta tiene la clase "active" */
.beer-card.active .tasting-notes {
    display: block;
}

/* Botón de disponibilidad */
.beer-availability {
    display: inline-block;
    padding: 10px 15px;
    font-size: 1em;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
    transition: background 0.3s ease-in-out, transform 0.2s;
}

/* Verde cuando está disponible */
.beer-availability.available {
    background: #28a745;
    color: white;
}

/* Rojo cuando no está disponible */
.beer-availability.not-available {
    background: #dc3545;
    color: white;
}

/* Efecto al pasar el mouse */
.beer-availability:hover {
    transform: scale(1.05);
    opacity: 0.9;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1f65333 *//* Estilos generales de la tarjeta */
.beer-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    max-width: 300px;
    margin: 20px auto;
    font-family: 'Arial', sans-serif;
    position: relative;
    cursor: pointer; /* Hace que la tarjeta sea clickeable */
}

/* Nota de cata oculta por defecto */
.tasting-notes {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 15px;
    border-radius: 8px;
    font-size: 1em;
    display: none; /* Se oculta hasta que se haga clic */
    max-width: 1950px;
    text-align: center;
    z-index: 10;
}

/* Mostrar popup cuando la tarjeta tiene la clase "active" */
.beer-card.active .tasting-notes {
    display: block;
}

/* Botón de disponibilidad */
.beer-availability {
    display: inline-block;
    padding: 10px 15px;
    font-size: 1em;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
    transition: background 0.3s ease-in-out, transform 0.2s;
}

/* Verde cuando está disponible */
.beer-availability.available {
    background: #28a745;
    color: white;
}

/* Rojo cuando no está disponible */
.beer-availability.not-available {
    background: #dc3545;
    color: white;
}

/* Efecto al pasar el mouse */
.beer-availability:hover {
    transform: scale(1.05);
    opacity: 0.9;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1ed0dde *//* Estilos generales de la tarjeta */
.beer-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    max-width: 300px;
    margin: 20px auto;
    font-family: 'Arial', sans-serif;
    position: relative;
    cursor: pointer; /* Hace que la tarjeta sea clickeable */
}
.beer-card .beer-name {
    font-weight: bold;
}
.beer-card .beer-style {
    font-size: 0.95em;          /* Tamaño más pequeño */
    color: #888;                /* Color gris suave */
    margin-top: 5px;            /* Pequeña separación desde el nombre */
    font-style: italic;         /* Opcional: estilo cursiva */
}


/* Nota de cata oculta por defecto */
.tasting-notes {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 15px;
    border-radius: 8px;
    font-size: 1em;
    display: none; /* Se oculta hasta que se haga clic */
    max-width: 1950px;
    text-align: center;
    z-index: 10;
}

/* Mostrar popup cuando la tarjeta tiene la clase "active" */
.beer-card.active .tasting-notes {
    display: block;
}

/* Botón de disponibilidad */
.beer-availability {
    display: inline-block;
    padding: 10px 15px;
    font-size: 1em;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
    transition: background 0.3s ease-in-out, transform 0.2s;
}

/* Verde cuando está disponible */
.beer-availability.available {
    background: #28a745;
    color: white;
}

/* Rojo cuando no está disponible */
.beer-availability.not-available {
    background: #dc3545;
    color: white;
}

/* Efecto al pasar el mouse */
.beer-availability:hover {
    transform: scale(1.05);
    opacity: 0.9;
}
/* Imagen más grande */
.beer-image-container .beer-image {
    width: 100%; /* Hace que la imagen ocupe todo el ancho del contenedor */
    max-height: 300px; /* Ajusta este valor según tu diseño */
    object-fit: cover;
    border-radius: 10px;
}

/* Puedes ajustar también el contenedor de la imagen si hace falta */
.beer-image-container {
    margin-bottom: 15px;
}

/* Popup de nota de cata más ancho y mejor posicionado */
.tasting-notes-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.95);
    color: white;
    padding: 20px;
    border-radius: 10px;
    font-size: 1em;
    display: none;
    width: 90vw; /* Usa una unidad relativa para mayor responsividad */
    max-width: 800px; /* Ajusta este valor según el diseño deseado */
    text-align: left;
    z-index: 999;
    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
    overflow-y: auto;
    max-height: 80vh; /* Por si es muy larga, que no se desborde */
}

/* Mostrar cuando está activa */
.beer-card.active .tasting-notes-popup {
    display: block;
}/* End custom CSS */
/* Start custom CSS *//* Estilos generales de la tarjeta */
.beer-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    max-width: 300px;
    margin: 20px auto;
    font-family: 'Arial', sans-serif;
    position: relative;
    cursor: pointer; /* Hace que la tarjeta sea clickeable */
}

/* Nota de cata oculta por defecto */
.tasting-notes {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 15px;
    border-radius: 8px;
    font-size: 1em;
    display: none; /* Se oculta hasta que se haga clic */
    max-width: 1950px;
    text-align: center;
    z-index: 10;
}

/* Mostrar popup cuando la tarjeta tiene la clase "active" */
.beer-card.active .tasting-notes {
    display: block;
}

/* Botón de disponibilidad */
.beer-availability {
    display: inline-block;
    padding: 10px 15px;
    font-size: 1em;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
    transition: background 0.3s ease-in-out, transform 0.2s;
}

/* Verde cuando está disponible */
.beer-availability.available {
    background: #28a745;
    color: white;
}

/* Rojo cuando no está disponible */
.beer-availability.not-available {
    background: #dc3545;
    color: white;
}

/* Efecto al pasar el mouse */
.beer-availability:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

/* Mostrar popup cuando la tarjeta tiene la clase "active" */
.beer-card.active .tasting-notes {
    display: block;
}

/* Botón de disponibilidad */
.beer-availability {
    display: inline-block;
    padding: 10px 15px;
    font-size: 1em;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
    transition: background 0.3s ease-in-out, transform 0.2s;
}

/* Verde cuando está disponible */
.beer-availability.available {
    background: #28a745;
    color: white;
}

/* Rojo cuando no está disponible */
.beer-availability.not-available {
    background: #dc3545;
    color: white;
}

/* Efecto al pasar el mouse */
.beer-availability:hover {
    transform: scale(1.05);
    opacity: 0.9;
}
.beer-name {
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 6px;
}

.beer-style {
    font-size: 0.9em;
    color: #555;
    font-style: italic;
    margin-bottom: 4px;
}

.beer-info,
.beer-origin,
.beer-format {
    font-size: 0.85em;
    color: #666;
    margin-bottom: 3px;
}

.beer-price {
    font-size: 1em;
    font-weight: bold;
    margin-top: 8px;
}
.beer-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.beer-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}/* End custom CSS */