/* ---- Reset y Estilos Globales ---- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Lato', sans-serif;
    background-color: #1a1a1a; /* Fondo oscuro y elegante */
    color: #f4f4f4; /* Texto casi blanco para alto contraste */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    text-align: center;
}

a {
    color: #fff;
    text-decoration: none;
}
a:visited {
    color: #fff; /* Color tomate para enlaces visitados */
}
a:hover {
    color: #fff; /* Naranja más brillante al pasar el ratón */
    text-decoration: underline;
}

/* ---- Contenedor Principal ---- */
.container {
    max-width: 500px;
    width: 100%;
    /* Efecto de entrada suave con JavaScript */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease-out, transform 0.8s ease-out;
}

.container.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Portada del Libro ---- */
.book-cover img {
    width: 100%;
    max-width: 280px; /* Tamaño máximo de la portada en pantallas grandes */
    height: auto;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* Sombra para dar profundidad */
    margin-bottom: 2rem;
}

/* ---- Información del Libro ---- */
.book-info h1 {
    font-family: 'Merriweather', serif;
    font-size: 2.5rem; /* Tamaño grande para el título */
    margin-bottom: 0.5rem;
    color: #ffffff;
}

.subtitle {
    font-size: 1.2rem;
    font-weight: 400;
    color: #b0b0b0; /* Color más suave para el subtítulo */
    font-style: italic;
    margin-bottom: 1.5rem;
}

.authors {
    font-size: 1rem;
    color: #999;
    margin-bottom: 2.5rem;
}

/* ---- Botón de Descarga ---- */
.download-button {
    display: inline-block;
    background-color: #3498db; /* Un color azul llamativo */
    color: #ffffff;
    border: none; /* Un azul más oscuro para el borde */
    cursor: pointer;
    padding: 15px 35px;
    border-radius: 50px; /* Botón con bordes redondeados (píldora) */
    text-decoration: none;
    font-weight: bold;
    font-size: 1.8rem;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
}

.download-button:hover {
    background-color: #2980b9; /* Azul más oscuro al pasar el ratón */
    transform: translateY(-3px); /* Efecto de elevación */
}

.top-box {
    margin-top: 2.5rem;
    font-size: 0.8rem;
    color: #888; /* Un gris sutil */
}

.note {
    margin-bottom: 2em;
}
.theurl {
    display: inline;
    margin: 2em auto;
    padding: 10px;
    background-color: #000;
    color: #ccc;
    font-size: 1.2em;
}

.tortilleria {
    font-family: 'Merriweather', serif;
    margin-top: 2rem;
    font-size: 1.2rem;
    color: #fff; /* Un gris sutil */
}
.masas {
    margin-top: 1rem;
    font-size: 1rem;
    color: #ddd; /* Un gris sutil */
}
.presenta {
    margin-top: 1rem;
    font-size: 1rem;
    color: #666; /* Un gris sutil */
}

.feicac {
    width: 280px;
    margin: 2em auto; /* Centrar la imagen */
    padding: 10px;
    border-radius: 13px; /* Bordes redondeados */
    background-color: #fff; /* Fondo claro */
}
.feicac img {
    max-width: 100%; /* Asegura que la imagen no se desborde */
    height: auto; /* Mantiene la proporción de la imagen */
}

.license-info a {
    color: #aaa; /* Color del enlace un poco más claro */
    text-decoration: underline;
    transition: color 0.3s ease;
}

.license-info a:hover {
    color: #fff; /* Resaltar el enlace al pasar el ratón */
}

/* Styles for the clickable divs */
.selectable {
    border: 2px dashed #ccc;
    padding: 15px;
    margin-top: 15px;
    cursor: pointer;
    width: 80%;
    max-width: 500px;
    transition: border-color 0.3s, background-color 0.3s;
}

.selectable:hover {
    border-color: dodgerblue;
    background-color: #f0f8ff;
}

/* Styles for the "Copied!" notification */
#copy-notice {
    position: fixed; /* Stays in the same place even if you scroll */
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%); /* Center the element */
    background-color: #28a745; /* Green background */
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 16px;
    z-index: 1000;
    
    /* Start hidden and transition opacity */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s, visibility 0.5s;
}

/* Class to show the notification */
#copy-notice.show {
    opacity: 1;
    visibility: visible;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0 auto;
    width: 50%;
}
.flecha-up,.flecha-down {
    width: 50px; /* Tamaño de las flechas */
    height: 50px;
    /* height: auto; */
    cursor: pointer;
    transition: transform 0.3s ease;
}
.flecha-up {
    margin: 20px auto 0;
}
.flecha-down {
    margin: 0 auto 20px;
}

/* ---- Diseño Adaptativo (Responsive) ---- */
@media (max-width: 600px) {
    .book-info h1 {
        font-size: 2rem; /* Reduce el tamaño del título en móviles */
    }

    .subtitle {
        font-size: 1rem; /* Reduce el tamaño del subtítulo */
    }
}