/*
Theme Name: erase_una_vez
Theme URI: https://muchoscuentos.com
Author: Ibai Moneo
Author URI: https://muchoscuentos.com
Description: Tema personalizado del sitio de cuentos infantiles 
'www.muchoscuentos.com' dedicado a la educación y diversión de los 
menores sin importar estatus social, origen, sexo, color de piel...
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: erase_una_vez
*/
/* Custom Theme Styles for erase_una_vez - botones-flotantes.css */
/* Cookies */
.cookie-settings-button {
    position: fixed;
    bottom: clamp(.875rem, -.239rem + 3.131vh, 1.875rem);
    z-index:51;
    aspect-ratio: 1 / 1;
    width: clamp(2rem, 1.6rem + 2vw, 4rem);
    cursor: pointer;
    background-color: var(--bg-header);
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    border: .05em solid #000;
}
.cookie-settings-button svg {
    aspect-ratio: 1 / 1;
    width: clamp(1.5rem, 1.2rem + 1.5vw, 3rem);
    fill: #000;
}
/* Opcional: Tooltip para el botón */
.cookie-settings-button::after {
    content: "Preferencias de cookies";
    position: absolute;
    top: 15%;
    right: 50%;
    background-color: #333;
    color: white;
    padding: .15em .3em;
    border-radius: .24em;
    font-size: var(--fs);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
    white-space: nowrap;
}
.cookie-settings-button:hover::after {
    opacity: 1;
    visibility: visible;
}
/* Flecha volver arriba */
.content__arriba{
    background-repeat:no-repeat;
    position: fixed;
    bottom: clamp(4.063rem, 1.627rem + 6.849vh, 6.25rem);
    z-index:51;
    cursor: pointer;
    opacity: 0;
    transition: opacity .6s ease-in-out;
    pointer-events: none;
}
.content__arriba.visible {
  opacity: 1;
  pointer-events: auto;
}
.content__arriba img {
    aspect-ratio: 1 / 1;
    width: clamp(2rem, 1.6rem + 2vw, 4rem); 
}
.content__arriba,
.cookie-settings-button {
    right: clamp(.5rem, .009rem + 2.455vw, 1.188rem);
}
@media (orientation: landscape) {
.content__arriba {
        bottom: clamp(3.375rem, 1.954rem + 7.105vh, 6.75rem);
        right: clamp(.938rem, .069rem + 2.443vw, 3rem);
    }
}