/* Fondo y estilo general */
body {
    background-color: pink;
}

/* Asegurarse de que la página ocupe todo el alto */
html, body {
  height: 100%;  /* Ocupa todo el alto de la ventana */
  margin: 0;     /* Eliminar márgenes por defecto */
  padding: 0;    /* Eliminar rellenos por defecto */
  display: flex; /* Hacer que el body ocupe el 100% y sea un contenedor flexible */
  flex-direction: column; /* Organizar los elementos del body en columna */
}

/* El contenido de la página se expande para ocupar el espacio disponible */
body {
  flex-grow: 1; /* Hace que el contenido principal crezca y ocupe el espacio disponible */
}

/* Estilos básicos del header (fijo) */
header {
  position: fixed;  /* Fija el header en la parte superior */
  top: 0;
  left: 0;
  width: 100%;  /* Asegura que el header ocupe todo el ancho */
  background-color: #222;  /* Fondo del header */
  color: white;
  text-align: center;
  font-family: Arial, sans-serif;
  z-index: 9998;
  padding: 30px 5px; /* Espaciado en el header */
  box-sizing: border-box;
  margin: 0;
  top: 0;
  left: 0;
}

/* Asegurarse de que el contenido principal no quede cubierto por el header fijo */
main {
  margin-top: 20px; /* Da espacio debajo del header fijo */
  padding: 20px;     /* Agrega un poco de relleno */
  flex-grow: 1; /* Asegura que el contenido principal ocupe el espacio disponible */
}

/* Estilos básicos del footer */
footer {
  padding: 15px 10px;  /* Añadir más espacio en el footer */
  background-color: #222;  /* Fondo del footer */
  color: white;
  text-align: center;
  font-family: Arial, sans-serif;
  z-index: 9998;
  width: 100%;  /* Asegura que el footer ocupe todo el ancho */
  box-sizing: border-box;  /* Asegura que el padding no afecte el tamaño total */
  position: relative;  /* Hace que se coloque al final de la página */
  margin-top: auto;  /* Esto asegura que siempre se quede en la parte inferior de la página */
  min-height: 100px;  /* Ajustamos la altura mínima del footer */
}

/* Ajustar el contenido dentro del footer */
.footer-content {
  margin: 0;
  padding: 0;
  text-align: center;
}

/* Animación del título del libro */
.book-title {
  font-weight: bold;
  color: #ffc0e0;
  text-shadow: 0 0 8px #ffc0e0, 0 0 16px #ffd7ee, 0 0 24px #fff0f8;
  animation: textGlowingPink 2s ease-in-out infinite alternate;
}

@keyframes textGlowingPink {
  0% {
    text-shadow: 0 0 8px #ffc0e0, 0 0 16px #ffd7ee, 0 0 24px #fff0f8;
  }
  100% {
    text-shadow: 0 0 12px #ffdeee, 0 0 20px #ffe9f4, 0 0 36px #fff8fb;
  }
}


/* Estilos para el contenedor del temporizador (centrado y fijo en la parte superior del header) */
#countdown-timer {
    position: absolute;
    top: 0px;               /* Fijado en la parte superior del header */
    left: 50%;               /* Centrado horizontalmente */
    transform: translateX(-50%); /* Asegura que esté centrado */
    background-color: transparent; /* Fondo totalmente transparente */
    color: #fff;                 /* Texto blanco */
    text-align: center;          /* Centrado del texto */
    font-family: 'Arial', sans-serif;
    font-size: 14px;             /* Texto más pequeño */
    padding: 5px 10px;           /* Espaciado */
    border-radius: 5px;         /* Bordes redondeados */
}

/* Estilos para el botón de mostrar/ocultar el temporizador */
.toggle-timer {
    position: absolute;
    top: 10px;               /* Fijado en la parte superior */
    right: 20px;             /* A la derecha */
    background-color: #e74c3c; /* Rosa fuerte */
    color: #fff;                 /* Texto blanco */
    font-size: 20px;            /* Tamaño más pequeño */
    border: none;
    padding: 8px 12px;         /* Reducimos el tamaño */
    cursor: pointer;
    border-radius: 50%;         /* Botón redondo */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);  /* Sombra para efecto 3D */
    transition: background-color 0.3s ease, transform 0.3s ease;
    z-index: 10000;
}

/* Efecto hover para el botón (cambio de color y pequeño aumento de tamaño) */
.toggle-timer:hover {
    background-color: #c0392b; /* Rosa más oscuro */
    transform: scale(1.1);      /* Aumento suave del tamaño */
}

/* Efecto focus para el botón */
.toggle-timer:focus {
    outline: none; /* Eliminar borde de foco por defecto */
    box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.5); /* Efecto de foco suave */
}

/* Estilo para ocultar el temporizador */
.hidden {
    display: none;
}

/* Título con tipografía más "de libro" */
h1 {
  font-family: "Garamond", "Palatino Linotype", "Book Antiqua", "Georgia", serif;
  font-size: 3rem;
  font-weight: 60;
  color: #fff;
  margin: 60px 0 0; /* mueve el título hacia abajo */
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-align: center;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  text-shadow: 0 2px 6px rgba(0,0,0,0.25);
  font-variant-ligatures: common-ligatures;
  font-feature-settings: "liga" 1;
}

/* Ajuste para pantallas pequeñas */
@media (max-width: 768px) {
  h1 {
    margin-top: 30px; /* menos espacio en móviles */
    font-size: 2.2rem;
  }
}

/* Menú lateral */
.menu-pestanas {
    list-style: none;
    display: none; /* Menú oculto por defecto */
    flex-direction: column;
    background: linear-gradient(180deg, #ffe6f0 0%, #ffcce0 50%, #ffb3d9 100%);
    background-image: url('marcos/marco-brillo-rosa.png');
    background-size: cover; /* Asegura que la imagen cubra todo el fondo */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* No repite la imagen */
    padding: 10px;
    margin: 0;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1), inset 0 1px 2px rgba(255,255,255,0.2);
    position: fixed;
    top: 20px;
    left: 10px;
    z-index: 9999;
    isolation: isolate;
    width: 220px;
    border: 1px solid rgba(255,180,210,0.5);
    /* Añadimos un padding superior para hacer espacio para la X */
    padding-top: 20px;  /* Ajusta este valor según necesites */
}


/* Botón de cierre en el fondo del menú */
.close-menu {
    position: absolute;
    top: -10px;  /* Alineación más cerca de la esquina */
    right: 0px;  /* Alineación más cerca de la esquina */
    background: transparent;
    border: none;
    color: #a03f60;  /* Rosa oscuro para que haga contraste con el fondo */
    font-size: 32px;  /* Aumentamos el tamaño de la "X" */
    cursor: pointer;
    padding: 5px;
    z-index: 1;  /* Asegura que la X esté en una capa superior */
}

/* Cambio de color cuando se pasa el ratón por encima */
.close-menu:hover,
.close-menu:focus {
    color: #ff66b3;  /* Color para hover */
    transform: scale(1.2);  /* Efecto de zoom al pasar el ratón */
    background: transparent;  /* Asegura que no haya fondo al hacer hover */
    outline: none;  /* Elimina el contorno al hacer focus */
    box-shadow: none;  /* Elimina cualquier sombra que pueda aparecer */
}

/* Otros estilos del menú, como los links */
.menu-pestanas li {
    margin: 12px 0;
}

.menu-pestanas li a {
    color: #a03f60;
    text-decoration: none;
    font-weight: 600;
    font-family: 'Georgia', serif;
    padding: 10px 18px;
    border-radius: 10px;
    display: block;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #ffd1e6, #ffb3d9);
    box-shadow: 0 3px 6px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.3);
}

.menu-pestanas li a:hover,
.menu-pestanas li a:focus {
    background: linear-gradient(135deg, #ffb3d9, #ff66b3);
    color: #fff;
    transform: translateX(4px) scale(1.02);
    box-shadow: 0 6px 12px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.2);
}

/* Animación de entrada */
.menu-pestanas.show {
    display: flex;
    animation: fadeIn 0.4s ease forwards;
}

@keyframes fadeIn {
    0% { opacity: 0; transform: translateX(-12px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* Permitimos mover el menú cuando esté abierto en móvil */
@media (max-width: 768px) {
    .menu-pestanas.show {
        cursor: grab;
        touch-action: none; /* Permite control total con touch */
    }

    .menu-pestanas:active {
        cursor: grabbing;
    }
}

/* Estilo del botón que activa el menú */
.menu-toggle {
    background-color: #222;
    color: #fff;
    border: none;
    font-size: 30px;
    margin-top: 10px;
    margin-bottom: 0px;
    cursor: pointer;
    padding: 10px 20px;
    border-radius: 50%;
    transition: all 0.3s ease;
    z-index: 101;
    display: inline-flex;
    align-items: center;
}

/* Estilo para el texto al lado del icono */
.menu-toggle span {
    margin-left: 10px;
    font-size: 16px;
}

/* Añadir un degradado de rosa a negro al pasar el ratón */
.menu-toggle:hover {
    /* Degradado de rosa a negro */
    background-image: linear-gradient(90deg, #ffb6c1 20%, #ec88ba 80%);
    color: #fff;
    transform: scale(1.05);
}

/* Tooltip */
.menu-toggle[title]:hover::after {
    content: attr(title);
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #222;
    color: #fff;
    padding: 5px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
}

/* Animación para el menú lateral cuando se muestra */
.menu-pestanas.show {
    display: flex;
}

/* Menú lateral flotante limpio y elegante para móvil horizontal */
@media (max-width: 1024px) and (orientation: landscape) {
    .menu-pestanas {
        list-style: none;
        display: none; /* Oculto por defecto */
        flex-direction: column;
        background: rgba(255, 230, 240, 0.95); /* Fondo rosa suave semi-transparente */
        backdrop-filter: blur(8px); /* Efecto glassmorphism discreto */
        padding: 12px;
        margin: 0;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.08);
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 100;
        width: 35%; /* Ocupa solo un tercio de la pantalla */
        max-width: 250px;
        max-height: 85vh; /* Limita altura */
        overflow-y: auto; /* Scroll interno si hay muchas pestañas */
        border: 1px solid rgba(255,180,210,0.4);
    }

    .menu-pestanas li {
        margin: 8px 0;
    }

    .menu-pestanas li a {
        color: #a03f60;
        text-decoration: none;
        font-weight: 600;
        font-family: 'Georgia', serif;
        padding: 8px 12px;
        border-radius: 8px;
        display: block;
        font-size: 0.9rem;
        transition: all 0.25s ease;
        background: linear-gradient(135deg, #ffd1e6, #ffb3d9);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
    }

    /* Hover sutil y elegante */
    .menu-pestanas li a:hover,
    .menu-pestanas li a:focus {
        background: linear-gradient(135deg, #ffb3d9, #ff99cc);
        color: #fff;
        transform: translateX(2px);
        box-shadow: 0 3px 6px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.2);
    }

    .menu-pestanas.show {
        display: flex;
        animation: fadeIn 0.4s ease forwards;
    }

    @keyframes fadeIn {
        0% { opacity: 0; transform: translateX(-8px); }
        100% { opacity: 1; transform: translateX(0); }
    }
}


/* Estilos para el header */
header {
    position: relative;
    z-index: 0;
}

/* Secciones sin animación de deslizamiento */
section {
    background-color: #fff8f0;
    padding: 25px 30px;
    margin: 0 auto 30px auto;
    max-width: 900px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-radius: 8px;
}

/* Línea divisoria */
hr {
    border: none;
    border-top: 2px solid #ccc;
    margin: 40px 0;
}

/* Animación suave al hacer scroll */
html {
    scroll-behavior: smooth;
}

/* Centrar el título */
.title {
    text-align: center;   /* Centra el texto */
    font-size: 2em;       /* Ajusta el tamaño de la fuente */
    margin-bottom: 20px;  /* Añade espacio debajo */
}

/* Contenedor de la autora */
.author {
    display: flex;
    justify-content: center;  /* Centra horizontalmente */
    align-items: center;      /* Centra verticalmente */
    flex-direction: column;   /* Para apilar la imagen y la biografía */
    text-align: center;       /* Centra el texto */
    padding: 20px;            /* Espaciado alrededor */
}

/* Estilo de la foto de la autora */
.author-photo {
    width: 200px;      /* Ajusta el tamaño de la imagen */
    height: 200px;     /* Hace que la altura sea igual a la anchura para una forma cuadrada */
    object-fit: contain; /* Hace que la imagen se ajuste sin recortarse */
    border-radius: 50%; /* Hace la imagen circular */
    margin-bottom: 20px; /* Espacio entre la foto y la biografía */
}

/* Estilo de la biografía */
.bio {
    max-width: 600px; /* Limita el tamaño de la biografía */
    margin: 0 auto;   /* Centra la biografía */
    font-size: 16px;  /* Ajusta el tamaño del texto */
    line-height: 1.6; /* Mejora la legibilidad */
}

/* Hacer que la foto y la biografía se ajusten bien en pantallas pequeñas */
@media (max-width: 768px) {
    .author-photo {
        width: 150px;  /* Ajusta el tamaño de la foto en pantallas pequeñas */
        height: 150px;
    }
    .bio {
        font-size: 14px; /* Reduce el tamaño de la fuente en pantallas pequeñas */
    }
}

/* SECCIÓN PRÓLOGO */
.prologo {
    background-color: #fff8f0;
    padding: 25px 30px;
    margin: 30px auto;
    max-width: 900px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-radius: 8px;
}

.prologo h2 {
    color: #5d4037;
    margin-bottom: 10px;
}

.prologo h3 {
    font-weight: normal;
    color: #8d6e63;
    margin-bottom: 20px;
}

.prologo p {
    line-height: 1.6;
    margin-bottom: 15px;
    color: #333;
}

.prologo blockquote {
    border-left: 4px solid #8d6e63;
    padding-left: 15px;
    color: #5d4037;
    font-style: italic;
    margin: 20px 0;
}

/* SECCIÓN CAPÍTULOS */
.capitulos {
    background-color: #fdf3e7;
    padding: 25px 30px;
    margin: 30px auto;
    max-width: 900px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border-radius: 8px;
}

.capitulos h2 {
    color: #5d4037;
    margin-bottom: 15px;
}

.capitulos ul {
    list-style: disc;
    padding-left: 20px;
    color: #333;
}

.redes {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 400px;
    margin: 20px auto;
    text-align: center;
}

.redes a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    background-color: #FFC0CB; /* rosa clarito */
    color: #000;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
    position: relative;
    overflow: hidden; /* Asegura que el resplandor no salga de los bordes */
    transition: background-color 0.3s, box-shadow 0.3s, text-shadow 0.3s, transform 0.3s;
}

.redes a img {
    width: 24px;
    height: 24px;
}

/* Efecto de brillo ultra realista al pasar el ratón */
.redes a:hover {
    background-color: #FFB6C1; /* Rosa un poco más oscuro al pasar el ratón */
    
    /* Resplandor en el borde (brillo externo) */
    box-shadow: 0 0 30px 10px rgba(255, 192, 203, 0.7), 
                0 0 50px 20px rgba(255, 192, 203, 0.3),
                0 0 100px 25px rgba(255, 192, 203, 0.1); /* Efecto de resplandor intenso */

    /* Resplandor en el texto */
    text-shadow: 0 0 12px rgba(255, 192, 203, 0.8), 
                 0 0 20px rgba(255, 192, 203, 0.6), 
                 0 0 30px rgba(255, 192, 203, 0.4); /* Efecto de texto iluminado */

    /* Pulsación sutil para dar realismo al brillo */
    transform: scale(1.05); /* Hace que el enlace se "expanda" un poco al pasar el ratón */
}

/* Opcional: efecto de retroceso suave cuando se quita el ratón */
.redes a:active {
    transform: scale(0.98); /* "Efecto de presión" al hacer clic */
}

.entrevista {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    background-color: #fff0f5;
}

.entrevista h3 {
    margin-top: 0;
    color: #d63384;
}

.entrevista p.fecha,
.entrevista p.medio {
    font-size: 0.9em;
    color: #555;
    margin-bottom: 5px;
}

.entrevista p.resumen {
    margin-top: 10px;
}

/* Ocultar contenido */
.oculto {
    display: none !important;
}

/* Noticias */
.noticia {
    margin-bottom: 20px;
    background-color: #fff8f0;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
}

.noticia h3 {
    font-size: 1.8rem;
    color: #5d4037;
    margin-bottom: 10px;
}

.noticia .fecha {
    font-size: 1rem;
    color: #888;
    margin-bottom: 10px;
}

.noticia .resumen {
    font-size: 1.1rem;
    color: #555;
}

.noticia:hover {
    background-color: #ffe0b2;
}

/* Proximamente */
.proximamente {
    text-align: center;
    padding: 50px;
}

.proximamente h2 {
    letter-spacing: 1px;
}

.proximamente h2.rainbow-text {
    display: inline-block;
    font-weight: bold !important;
    font-size: 2.2rem;

    background: linear-gradient(
        90deg,
        #da6161,
        #d4a052,
        #f1f167,
        #71f071,
        #74ddf7,
        #8161e4,
        #cd70ec,
        #da6161, /* 🔑 MISMO COLOR QUE EL PRIMERO */
        #d4a052  /* 🔑 EXTRA para suavizar el loop */
    );

    background-size: 600% 100%; /* más largo = más suave */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
    animation: rainbowMove 12s linear infinite;
}

@keyframes rainbowMove {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* start countdown */

#countdown {
    font-weight: 600;
    font-size: 13px;
    display: inline-block;
    padding: 6px 12px;
    border-radius: 8px;

    /* Fondo suave en rosa pastel, discreto y agradable a la vista */
    background: linear-gradient(90deg,
        rgba(241, 142, 208, 0.85) 0%,
        rgba(243, 162, 209, 0.85) 50%,
        rgba(236, 91, 212, 0.85) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(4px);

    /* Texto claro, con sombra muy suave para contraste sin fatigar */
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.45);

    /* Pequeña transición para interacciones (hover/focus) */
    transition: transform 180ms ease, box-shadow 180ms ease;
    transform: translateZ(0);
}

#countdown {
    background-size: 200% 100%;
    animation: softShift 10s ease-in-out infinite;
}

/* Estado interactivo discreto */
#countdown:hover,
#countdown:focus {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.28);
}

/* Respetar preferencia de reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
    #countdown {
        animation: none;
        transition: none;
    }
}

@keyframes softShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* end countdown */


/* Estilo para los iconos de idioma */
.language-selector {
    display: flex;
    gap: 10px; /* Espacio entre los iconos */
    align-items: center;
    justify-content: center;
}

/* Estilo para los enlaces de idioma */
.language-selector a {
    display: inline-block;
}

.lang-icon {
    width: 30px;
    height: 30px;        /* Igual ancho y alto para círculo perfecto */
    border-radius: 50%;  /* Hace la imagen circular */
    object-fit: cover;   /* Ajusta la imagen al contorno sin deformar */
    transition: transform 0.3s ease;
}

/* Efecto hover para agrandar la bandera */
.lang-icon:hover {
    transform: scale(1.3); /* Aumentar ligeramente el tamaño de la bandera al hacer hover */
}

.user-info {
    text-align: right;
    margin-top: 10px;
    font-size: 14px;
    color: #fff;
}
.user-info a {
    color: #d2b48c;
    text-decoration: none;
    margin-left: 5px;
}
.user-info a:hover {
    text-decoration: underline;
}

#active-users {
    position: absolute; /* se mueve con la página */
    top: 0px;      
    left: 0px;     
    background-color: rgb(45, 45, 60);
    color: #ffffff;
    padding: 4px 6px;
    border-radius: 8px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    box-shadow: 0 2px 6px rgb(0, 0, 0);
    z-index: 1;
}

#musicToggle {
    position: absolute;
    top: 32px;        /* justo debajo de #active-users */
    left: 0px;

    background-color: rgb(45, 45, 60);
    color: #ffffff;

    padding: 4px 8px;
    border-radius: 8px;
    border: none;

    font-size: 14px;
    cursor: pointer;

    box-shadow: 0 2px 6px rgb(0, 0, 0);
    z-index: 1;

    transition: background-color 0.2s ease, transform 0.1s ease;
}

#musicToggle:hover {
    background-color: rgb(65, 65, 85);
    transform: scale(1.05);
}

/* Estilo básico de la ventana emergente */
.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
    display: none; /* Inicia oculta */
    justify-content: center;
    align-items: center;
}

/* Estilo para el contenido de la ventana emergente */
.popup-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    width: 400px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Botón para cerrar la ventana */
.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 20px;
    background-color: transparent;
    border: none;
}

button {
    padding: 10px;
    background-color: #ff66b2;
    border: none;
    color: white;
    border-radius: 8px;
    cursor: pointer;
}

button:hover {
    background-color: #ff3385;
}

.success-message {
    margin-top: 15px;
    color: #388e3c; /* Un verde más oscuro */
    font-size: 16px;
}

.error-message {
    margin-top: 15px;
    color: #f44336;
    font-size: 16px;
}

/* Ajustes para mejorar la legibilidad */
.success-message, .error-message {
    background-color: #ffffff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    font-weight: bold;
}

/* NIEVE 3D REALISTA */
.snowflake {
    position: fixed;
    top: -40px;
    color: #a8d8ff;
    pointer-events: none;
    z-index: 99999;
    will-change: transform, opacity;
    font-weight: bold;
    text-shadow: 0 0 4px #fff;
    animation: snowFall3D linear forwards;
}

/* Animación 3D con profundidad */
@keyframes snowFall3D {
    0% {
        transform: translate3d(var(--x-start), -80px, var(--z));
        opacity: 0;
    }
    20% { opacity: 1; }
    100% {
        transform: translate3d(var(--x-end), 110vh, calc(var(--z) * 1.4)) rotate(360deg);
        opacity: 0.3;
    }
}

.intro-contenido {
    display: flex;
    align-items: center;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.intro-texto {
    flex: 1;
}

.intro-img {
    width: 220px;
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
}

.libro-3d-movil {
    display: none;
}

/* ---------------------- */
/* MÓVIL (max-width:900) */
/* ---------------------- */
@media (max-width: 900px) {

    .intro-contenido {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px;
    }

    .intro-texto {
        width: 100%;
        max-width: 100%;
    }

    /* Ocultamos imágenes normales */
    .intro-img {
        display: none;
    }

    /* El menú SIEMPRE por encima */
    .menu-pestanas {
        z-index: 9999;
        isolation: isolate;
    }

    /* Libro 3D */
    .libro-3d-movil {
        z-index: 1;
        position: relative;
        display: block;
        perspective: 1200px;
        width: 220px;
        margin: 20px auto 30px;
    }

    .libro {
        position: relative;
        width: 220px;
        height: 320px;
        transform-style: preserve-3d;
        z-index: 1;
    }

    .cara {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
    }

    .cara img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 6px;
    }

    .portada {
        transform: rotateY(0deg) translateZ(15px);
    }

    .contraportada {
        transform: rotateY(180deg) translateZ(15px);
    }

    .paginas {
        position: absolute;
        top: 4px;
        right: 4px;
        width: 12px;
        height: calc(100% - 8px);
        transform: translateZ(10px);
    }

    .paginas span {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(
            to right,
            #f5f5f5,
            #e6e6e6
        );
        border-radius: 2px;
        transform-origin: left;
    }

    /* desplazamos cada “página” */
    .paginas span:nth-child(1) { transform: translateX(0px); }
    .paginas span:nth-child(2) { transform: translateX(1px); }
    .paginas span:nth-child(3) { transform: translateX(2px); }
    .paginas span:nth-child(4) { transform: translateX(3px); }
    .paginas span:nth-child(5) { transform: translateX(4px); }

    /* sombra general del libro */
    .libro {
        box-shadow: 0 25px 40px rgba(0,0,0,0.35);
    }

    .lomo {
        position: absolute;
        width: 30px;
        height: 100%;
        background: #2b2b2b;
        left: -15px;
        transform: rotateY(-90deg) translateZ(15px);
    }

    /* INDICADOR DE DESLIZAR (nuevo) */
    .libro-3d-movil::before,
    .libro-3d-movil::after {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        border: 2px solid #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0.7;
    }

    .libro-3d-movil::before {
        left: -60px;
        border-right: none;
        border-top: none;
        transform: translateY(-50%) rotate(45deg);
    }

    .libro-3d-movil::after {
        right: -60px;
        border-left: none;
        border-bottom: none;
        transform: translateY(-50%) rotate(45deg);
    }

    .slide-hint {
    display: block !important;
    color: rgb(236, 0, 165) !important;
    font-size: 20px !important;
    position: absolute !important;
    top: -40px !important;       /* encima del libro */
    left: 50% !important;
    transform: translateX(-50%) !important;
    white-space: nowrap !important; /* evita que se rompa en varias líneas */
}

    /* Cuando el menú está abierto */
    body.menu-open .libro {
        transform: none !important;
    }

    body.menu-open .libro-3d-movil {
        pointer-events: none;
    }

    body.menu-open .menu-pestanas {
        z-index: 9999;
    }

    body.menu-open .libro-3d-movil {
        display: none !important;
    }
}

.buy-cta {
    margin: 50px 0;
    padding: 40px 20px;
    text-align: center;
    background: linear-gradient(135deg, #f9f6f1, #ffffff);
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.buy-cta h2 {
    font-size: 1.8em;
    margin-bottom: 15px;
    color: #2e7d32;
}

.buy-cta p {
    font-size: 1.1em;
    margin-bottom: 25px;
    color: #444;
}

.buy-button {
    display: inline-block;
    padding: 14px 30px;
    background-color: #2e7d32;
    color: white;
    font-weight: bold;
    font-size: 1.05em;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.buy-button:hover {
    background-color: #256628;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}