.tapa-libro {
    /* 1. TU SOMBRA FAVORITA */
    /* Versión estándar (PC) */
    box-shadow: 5px 5px 15px rgba(0,0,0,0.5);
    /* Versión especial para motores de celular (WebKit/iOS/Android) */
    -webkit-box-shadow: 5px 5px 15px rgba(0,0,0,0.5);

    /* 2. SUAVIZADO */
    /* Hace que el zoom no sea brusco */
    transition: transform 0.2s ease;
    
    /* 3. TRUCO DE RENDIMIENTO */
    /* Le dice al celular "presta atención a este objeto", ayuda a que no parpadee */
    transform: translateZ(0); 
    
    /* 4. ASEGURAR QUE SE VEA LA IMAGEN COMPLETA */
    /* A veces el navegador la corta si es muy grande */
    display: block; 
}

/* 5. EL EFECTO DE AGRANDAR */
.tapa-libro:hover,   /* Cuando pasas el mouse (PC) */
.tapa-libro:active { /* Cuando tocas con el dedo (Celular) */
    transform: scale(1.05);
}

 /* --- CLASE PARA BOTÓN VIOLETA --- */
  .btn-violeta {
      background-color: #6f42c1; /* Color de fondo (Violeta Bootstrap) */
      border-color: #6f42c1;     /* Color del borde */
      color: white;              /* Color del texto */
  }
  
  /* Efecto al pasar el mouse (Hover) - Un poco más oscuro */
  .btn-violeta:hover {
      background-color: #59359a; 
      border-color: #59359a;
      color: white;
  }

  /* --- CLASE PARA BOTÓN NARANJA (Ejemplo extra) --- */
  .btn-naranja {
      background-color: #fd7e14;
      border-color: #fd7e14;
      color: white;
  }
  .btn-naranja:hover {
      background-color: #ca6510;
      border-color: #ca6510;
      color: white;
  }
  /* --- 1. BOTÓN ROSA (Pink) --- */
  .btn-rosa {
      background-color: #e83e8c; /* Color base */
      border-color: #e83e8c;
      color: white;              /* Texto blanco */
  }
  .btn-rosa:hover {
      background-color: #c92a75; /* Un poco más oscuro al pasar mouse */
      border-color: #c92a75;
      color: white;
  }

  /* --- 2. BOTÓN TURQUESA (Teal) --- */
  .btn-turquesa {
      background-color: #20c997; /* Color base */
      border-color: #20c997;
      color: white;
  }
  .btn-turquesa:hover {
      background-color: #179670; /* Un poco más oscuro al pasar mouse */
      border-color: #179670;
      color: white;
  }		


/* --- ESTILOS GENERALES --- */

/* 1. FONDO GENERAL: Gris muy claro (#f8f9fa) */
body {
    background-color: #f8f9fa;
}



/* 2. HEADER */
header {
    background-color: #4A3800;
    padding: 15px 20px;
    border-radius: 5px;
    /* Sombra suave para que se note sobre el fondo gris */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); 
}

/* 3. LOGO: Blanco (según el color hex, aunque el comentario decía negro) */
.logo {
    color: #ffffff; 
    letter-spacing: 2px;
    font-weight: bold;
}

/* 4. FOOTER: Gris muy oscuro (#212529) */
footer#contact {
    background-color: #214141; 
    color: #ffffff; 
}

/* 5. TAGS y DETALLES: Rojo (#ff0000) */
.tag-text {
    color: #ff0000; 
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.85rem;
}

/* Estilo extra: Botón rojo para combinar */
.btn-custom-red {
    background-color: #ff0000;
    color: #ffffff;
    border: none;
}
.btn-custom-red:hover {
    background-color: #cc0000; 
    color: #ffffff;
}

/* Estilos de las tarjetas */
.card {
    transition: transform 0.3s;
    border: none; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.card:hover {
    transform: translateY(-5px);
}
/* Estilos para los enlaces del Pie de Página */
.link-pie {
    color: #444; /* Gris oscuro elegante */
    text-decoration: none; /* Sin subrayado */
    font-size: 1.1rem; /* Un poquito más grande */
    font-weight: 500;
    transition: color 0.3s ease;
}

.link-pie:hover {
    color: #000; /* Negro puro al pasar el mouse */
    text-decoration: underline; /* Aparece la linea al tocar */
    text-decoration-thickness: 1px; /* Linea fina */
    text-underline-offset: 4px; /* Linea un poco separada del texto */
}
/* Solo animación para los iconos azules */
.icono-social {
    /* No ponemos color, para que siga siendo ese azul lindo */
    font-size: 1.5rem;    /* Tamaño un poco más grande */
    text-decoration: none;
    display: inline-block; 
    transition: transform 0.3s ease; /* Suavidad */
}

/* Al pasar el mouse, solo se mueven, no cambian de color */
.icono-social:hover {
    transform: translateY(-3px); /* Saltito hacia arriba */
}